<template>
  <div id="detailPage" @click="bodyClick">
    <HeadNav
      type="publish"
      ref="head"
      :show="1"
      @publisherChange="publisherChange()"
      @scroll="scrollHeight"
    ></HeadNav>
    <div class="wd-1220">
      <div class="clearfix">
        <div class="float-left">
          <SlideNav type="publish" sort="detail"></SlideNav>
        </div>
        <div class="float-right">
          <div class="main-container">
            <!-- 商品详情 -->
            <!-- 详情吸顶 -->
            <div class="detail-fix" v-if="detailFix">
              <div class="fix-img">
                <img
                  :src="goodsInfo.cover_pic"
                  alt
                  style="width: 80px; height: 80px"
                  v-if="goodsInfo.cover_pic"
                />
                <span
                  v-else
                  class="no-pic"
                  style="min-width: 80px; min-height: 80px; vertical-align: top"
                ></span>
              </div>
              <div class="fix-info">
                <div
                  class="fix-title important"
                  v-if="goodsInfo.title_color == 1"
                >
                  {{ goodsInfo.title }}
                </div>
                <div class="fix-title" v-else>{{ goodsInfo.title }}</div>
                <div style="margin-top: 5px">
                  <span
                    v-if="
                      goodsInfo.sale_type_text == '滞销品种' ||
                      goodsInfo.sale_type_text == '停售品种'
                    "
                    class="data-tab data-tab-eleven"
                    style="margin: 0"
                    >{{ goodsInfo.sale_type_text }}</span
                  >
                  <span
                    v-else-if="goodsInfo.sale_type_text == '畅销品种'"
                    class="data-tab data-tab-eight"
                    style="margin: 0"
                    >{{ goodsInfo.sale_type_text }}</span
                  >
                  <span
                    v-else-if="goodsInfo.sale_type_text"
                    class="data-tab data-tab-ten"
                    style="margin: 0"
                    >{{ goodsInfo.sale_type_text }}</span
                  >
                  <span
                    v-if="goodsInfo.best_rank_info"
                    class="data-tab data-tab-seven"
                    style="margin: 0"
                    >{{ goodsInfo.best_rank_info }}</span
                  >
                </div>
              </div>
              <div class="fix-compete">
                <div
                  class="compete-content"
                  style="position:relative;width：120px;"
                >
                  <a-button style="width: 120px" v-if="goodsInfo.compete_id"
                    >竞品监控中</a-button
                  >
                  <a-button style="width: 120px" v-else>关注品种</a-button>
                  <div class="compete-lists">
                    <div
                      @click="setCompete"
                      class="compete-list"
                      v-if="
                        showCompete !== goodsInfo.supplier_id &&
                        !goodsInfo.compete_id
                      "
                    >
                      设为竞品监控
                    </div>
                    <div
                      @click="cancelCompete"
                      class="compete-list"
                      v-if="
                        showCompete !== goodsInfo.supplier_id &&
                        goodsInfo.compete_id
                      "
                    >
                      移除竞品监控
                    </div>
                    <div
                      @click="setFocusCompete"
                      class="compete-list"
                      v-if="
                        (powerType == 1 ||
                          showCompete == goodsInfo.supplier_id) &&
                        !goodsInfo.focus_id
                      "
                    >
                      加入自选关注
                    </div>
                    <div
                      @click="cancelFocusCompete"
                      class="compete-list"
                      v-if="
                        (powerType == 1 ||
                          showCompete == goodsInfo.supplier_id) &&
                        goodsInfo.focus_id
                      "
                    >
                      取消自选关注
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="model-container">
              <div class="model-bg goods-detail" style="position: relative">
                <div class="clearfix" v-if="goodsDetailPower">
                  <div class="goods-img float-left">
                    <img
                      :src="goodsInfo.cover_pic"
                      alt
                      style="width: 220px; height: 220px; cursor: pointer"
                      v-if="goodsInfo.cover_pic"
                      v-image-preview
                    />
                    <span
                      v-else
                      class="no-pic"
                      style="
                        min-width: 220px;
                        min-height: 220px;
                        vertical-align: top;
                      "
                    ></span>
                    <div class="descrip" v-if="goodsInfo.remain_sale_info">
                      {{ goodsInfo.remain_sale_info }}
                    </div>
                  </div>
                  <div class="goods-desc float-left">
                    <div style="min-height: 67px">
                      <div
                        class="title important"
                        v-if="goodsInfo.title_color == 1"
                      >
                        {{ goodsInfo.title }}
                      </div>
                      <div class="title" v-else>
                        {{ goodsInfo.title }}
                      </div>
                      <div style="padding-top: 3px">
                        <span
                          v-if="
                            goodsInfo.sale_type_text == '滞销品种' ||
                            goodsInfo.sale_type_text == '停售品种'
                          "
                          class="data-tab data-tab-eleven"
                          style="margin: 0"
                          >{{ goodsInfo.sale_type_text }}</span
                        >
                        <span
                          v-else-if="goodsInfo.sale_type_text == '畅销品种'"
                          class="data-tab data-tab-eight"
                          style="margin: 0"
                          >{{ goodsInfo.sale_type_text }}</span
                        >
                        <span
                          v-else-if="goodsInfo.sale_type_text"
                          class="data-tab data-tab-ten"
                          style="margin: 0"
                          >{{ goodsInfo.sale_type_text }}</span
                        >
                        <span
                          v-if="goodsInfo.best_rank_info"
                          class="data-tab data-tab-seven"
                          style="margin: 0"
                          >{{ goodsInfo.best_rank_info }}</span
                        >
                      </div>
                      <div
                        v-if="goodsInfo.tag_list.length > 0"
                        style="
                          margin-top: 5px;
                          height: 20px;
                          width: 350px;
                          overflow: hidden;
                        "
                      >
                        <span
                          class="data-tab data-tab-night"
                          v-for="(item, index) in goodsInfo.tag_list"
                          :key="index"
                          >{{ item.tag_name }}</span
                        >
                      </div>
                    </div>
                    <div class="isbn">
                      <span class="lable">ISBN</span>
                      <span class="value">{{ goodsInfo.isbn }}</span>
                      <span
                        @click="copyIsbn"
                        style="
                          margin-left: 5px;
                          cursor: pointer;
                          color: #07193f;
                          font-size: 12px;
                        "
                      >
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-fuzhi" />
                        </svg>
                      </span>
                    </div>
                    <div class="money">
                      <span class="lable">定价</span>
                      <span class="value"
                        >￥{{ goodsInfo.fixed_price.toFixed(2) }}</span
                      >
                    </div>
                    <div class="author">
                      <span class="lable">作者</span>
                      <span class="value">
                        <span v-if="goodsInfo.authors.length == 0">{{
                          goodsInfo.author
                        }}</span>
                        <span
                          class="click-font"
                          v-if="goodsInfo.authors.length == 1"
                          @click="$toAuthor(goodsInfo.authors[0].author_id)"
                          >{{ goodsInfo.author }}</span
                        >
                        <span
                          class="click-font"
                          v-if="goodsInfo.authors.length > 1"
                          @click.stop="openActive"
                          >{{ goodsInfo.author }}</span
                        >
                      </span>
                      <span
                        v-if="powerType == 1"
                        @click="openEdit"
                        style="
                          margin-left: 5px;
                          cursor: pointer;
                          color: #07193f;
                          font-size: 12px;
                        "
                      >
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-edit" />
                        </svg>
                      </span>
                    </div>
                    <div class="publish">
                      <span class="lable">出版社</span>
                      <span class="value">{{ goodsInfo.publisher_short }}</span>
                    </div>
                    <div class="publish-time">
                      <span class="lable">出版时间</span>
                      <span class="value">{{ goodsInfo.publish_date }}</span>
                    </div>
                    <div class="cate">
                      <span class="lable">类目</span>
                      <span class="value">
                        <span v-if="goodsInfo.cate_node_2">{{
                          goodsInfo.cate_node_2
                        }}</span>
                        <span v-if="goodsInfo.cate_node_3"
                          >＞ {{ goodsInfo.cate_node_3 }}</span
                        >
                        <span v-if="goodsInfo.cate_node_4">
                          ＞ {{ goodsInfo.cate_node_4 }}</span
                        >
                      </span>
                    </div>
                    <div class="author-list" v-if="authorActive">
                      <div v-if="goodsInfo.authors.length > 0">
                        <div
                          class="author-item click"
                          v-for="(aitem, aindex) in goodsInfo.authors"
                          :key="aindex"
                          @click.stop="$toAuthor(aitem.author_id)"
                        >
                          {{ aitem.name }}
                        </div>
                      </div>
                      <div v-else>
                        <div class="author-item">未查询到对应作者信息</div>
                      </div>
                    </div>
                  </div>
                  <!-- 雷达图 -->
                  <div class="radarMap float-right" style="width: 400px">
                    <div style="text-align: right">
                      <div
                        class="compete-content"
                        style="position:relative;width：120px;"
                      >
                        <a-button
                          style="width: 120px"
                          v-if="goodsInfo.compete_id"
                          >竞品监控中</a-button
                        >
                        <a-button style="width: 120px" v-else
                          >关注品种</a-button
                        >
                        <div class="compete-lists">
                          <div
                            @click="setCompete"
                            class="compete-list"
                            v-if="
                              showCompete !== goodsInfo.supplier_id &&
                              !goodsInfo.compete_id
                            "
                          >
                            设为竞品监控
                          </div>
                          <div
                            @click="cancelCompete"
                            class="compete-list"
                            v-if="
                              showCompete !== goodsInfo.supplier_id &&
                              goodsInfo.compete_id
                            "
                          >
                            移除竞品监控
                          </div>
                          <div
                            @click="setFocusCompete"
                            class="compete-list"
                            v-if="
                              (powerType == 1 ||
                                showCompete == goodsInfo.supplier_id) &&
                              !goodsInfo.focus_id
                            "
                          >
                            加入自选关注
                          </div>
                          <div
                            @click="cancelFocusCompete"
                            class="compete-list"
                            v-if="
                              (powerType == 1 ||
                                showCompete == goodsInfo.supplier_id) &&
                              goodsInfo.focus_id
                            "
                          >
                            取消自选关注
                          </div>
                        </div>
                      </div>
                    </div>
                    <div id="radar" v-if="radarEmpty"></div>
                    <div class="no-data" style="padding: 101px 0" v-else>
                      尚未生成品种评分数据
                    </div>
                  </div>
                </div>
                <div style="height: 240px" v-else>
                  <ModelNoPower
                    type="noPower"
                    :id="goodsDetailPowerID"
                    :organizeId="$refs.head.publishInfo.organization_id"
                  ></ModelNoPower>
                </div>
                <!-- 标签页 -->
                <div class="tabs">
                  <a-tabs :activeKey="tabKey" @change="callback">
                    <a-tab-pane key="1" tab="销售走势"></a-tab-pane>
                    <a-tab-pane key="2" tab="生命周期"></a-tab-pane>
                    <a-tab-pane key="3" tab="读者画像"></a-tab-pane>
                    <a-tab-pane key="4" tab="关联逻辑"></a-tab-pane>
                    <a-tab-pane key="5" tab="详细信息"></a-tab-pane>
                  </a-tabs>
                </div>
              </div>
            </div>
            <!-- 销售走势选择时间 -->
            <div class="model-container" v-show="tabKey == '1'">
              <div class="model-bg choose clearfix" v-show="salePower">
                <div class></div>
                <div class="float-right">
                  <TimeChoose
                    ref="time"
                    :dateShow="true"
                    @changeTime="changeTime"
                  ></TimeChoose>
                </div>
              </div>
            </div>
            <!-- 核心数据监控 -->
            <div class="model-container core-data" v-if="tabKey == '1'">
              <div v-if="salePower">
                <div class="section-title model-bg">核心数据监控</div>
                <div class="content model-bg">
                  <div class="clearfix">
                    <!-- 销售指数 -->
                    <span
                      :class="
                        typeText == 'sale_total'
                          ? 'data-block float-left active'
                          : 'data-block float-left'
                      "
                      @click="coreTypeChange('sale_total')"
                    >
                      <div>
                        <a-icon type="line-chart" />
                        <span class="secondary-font">销售指数</span>
                      </div>
                      <div class="data-font">
                        {{ sale_total_info.now.toLocaleString() }}
                      </div>
                      <div class="clearfix compare" style="width: 160px">
                        <div class="float-left" v-if="dateType == 1">
                          昨日对比
                        </div>
                        <div class="float-left" v-if="dateType == 2">
                          上周对比
                        </div>
                        <div class="float-left" v-if="dateType == 3">
                          上月对比
                        </div>
                        <div class="float-left" v-if="dateType == 4">
                          上年对比
                        </div>
                        <div
                          class="float-right up-number"
                          v-if="sale_total_info.pre_compare > 0"
                        >
                          {{ sale_total_info.pre_compare }}% ↑
                        </div>
                        <div
                          class="float-right down-number"
                          v-if="sale_total_info.pre_compare < 0"
                        >
                          {{ sale_total_info.pre_compare * -1 }}% ↓
                        </div>
                        <div
                          class="float-right down-number"
                          v-if="sale_total_info.pre_compare == 0"
                        >
                          {{ sale_total_info.pre_compare }}
                        </div>
                        <div
                          class="float-right down-number"
                          v-if="sale_total_info.pre_compare == '--'"
                        >
                          {{ sale_total_info.pre_compare }}
                        </div>
                      </div>
                      <div class="clearfix compare" style="width: 160px">
                        <div class="float-left">上年同期</div>
                        <div
                          class="float-right up-number"
                          v-if="sale_total_info.last_compare > 0"
                        >
                          {{ sale_total_info.last_compare }}% ↑
                        </div>
                        <div
                          class="float-right down-number"
                          v-if="sale_total_info.last_compare < 0"
                        >
                          {{ sale_total_info.last_compare * -1 }}% ↓
                        </div>
                        <div
                          class="float-right down-number"
                          v-if="sale_total_info.last_compare == 0"
                        >
                          {{ sale_total_info.last_compare }}
                        </div>
                        <div
                          class="float-right down-number"
                          v-if="sale_total_info.last_compare == '--'"
                        >
                          {{ sale_total_info.last_compare }}
                        </div>
                      </div>
                    </span>
                    <!-- 销售排名 -->
                    <span
                      :class="
                        typeText == 'sale_rank'
                          ? 'data-block float-left active'
                          : 'data-block float-left'
                      "
                      @click="coreTypeChange('sale_rank')"
                    >
                      <div>
                        <a-icon type="line-chart" />
                        <span class="secondary-font">行业排名</span>
                      </div>
                      <div class="data-font">{{ sale_rank_info.now }}</div>
                      <div class="clearfix compare" style="width: 160px">
                        <div class="float-left" v-if="dateType == 1">
                          昨日对比
                        </div>
                        <div class="float-left" v-if="dateType == 2">
                          上周对比
                        </div>
                        <div class="float-left" v-if="dateType == 3">
                          上月对比
                        </div>
                        <div class="float-left" v-if="dateType == 4">
                          上年对比
                        </div>
                        <div
                          class="float-right down-number"
                          v-if="sale_rank_info.pre_compare > 0"
                        >
                          {{ sale_rank_info.pre_compare }} ↓
                        </div>
                        <div
                          class="float-right up-number"
                          v-if="sale_rank_info.pre_compare < 0"
                        >
                          {{ sale_rank_info.pre_compare * -1 }} ↑
                        </div>
                        <div
                          class="float-right down-number"
                          v-if="sale_rank_info.pre_compare == 0"
                        >
                          {{ sale_rank_info.pre_compare }}
                        </div>
                        <div
                          class="float-right down-number"
                          v-if="sale_rank_info.pre_compare == '--'"
                        >
                          {{ sale_rank_info.pre_compare }}
                        </div>
                      </div>
                      <div class="clearfix compare" style="width: 160px">
                        <div class="float-left">上年同期</div>
                        <div
                          class="float-right down-number"
                          v-if="sale_rank_info.last_compare > 0"
                        >
                          {{ sale_rank_info.last_compare }} ↓
                        </div>
                        <div
                          class="float-right up-number"
                          v-if="sale_rank_info.last_compare < 0"
                        >
                          {{ sale_rank_info.last_compare * -1 }} ↑
                        </div>
                        <div
                          class="float-right down-number"
                          v-if="sale_rank_info.last_compare == 0"
                        >
                          {{ sale_rank_info.last_compare }}
                        </div>
                        <div
                          class="float-right down-number"
                          v-if="sale_rank_info.last_compare == '--'"
                        >
                          {{ sale_rank_info.last_compare }}
                        </div>
                      </div>
                    </span>
                    <!-- 市场占有率 -->
                    <span
                      :class="
                        typeText == 'sale_ratio'
                          ? 'data-block float-left active'
                          : 'data-block float-left'
                      "
                      @click="coreTypeChange('sale_ratio')"
                    >
                      <div>
                        <a-icon type="line-chart" />
                        <span class="secondary-font">类目排名</span>
                      </div>
                      <div class="data-font">{{ sale_cate_rank_info.now }}</div>
                      <div class="clearfix compare" style="width: 160px">
                        <div class="float-left" v-if="dateType == 1">
                          昨日对比
                        </div>
                        <div class="float-left" v-if="dateType == 2">
                          上周对比
                        </div>
                        <div class="float-left" v-if="dateType == 3">
                          上月对比
                        </div>
                        <div class="float-left" v-if="dateType == 4">
                          上年对比
                        </div>
                        <div
                          class="float-right down-number"
                          v-if="sale_cate_rank_info.pre_compare > 0"
                        >
                          {{ sale_cate_rank_info.pre_compare }} ↓
                        </div>
                        <div
                          class="float-right up-number"
                          v-if="sale_cate_rank_info.pre_compare < 0"
                        >
                          {{ sale_cate_rank_info.pre_compare * -1 }} ↑
                        </div>
                        <div
                          class="float-right down-number"
                          v-if="sale_cate_rank_info.pre_compare == 0"
                        >
                          {{ sale_cate_rank_info.pre_compare }}
                        </div>
                        <div
                          class="float-right down-number"
                          v-if="sale_cate_rank_info.pre_compare == '--'"
                        >
                          {{ sale_cate_rank_info.pre_compare }}
                        </div>
                      </div>
                      <div class="clearfix compare" style="width: 160px">
                        <div class="float-left">上年同期</div>
                        <div
                          class="float-right up-number"
                          v-if="sale_cate_rank_info.last_compare > 0"
                        >
                          {{ sale_cate_rank_info.last_compare }} ↑
                        </div>
                        <div
                          class="float-right down-number"
                          v-if="sale_cate_rank_info.last_compare < 0"
                        >
                          {{ sale_cate_rank_info.last_compare * -1 }} ↓
                        </div>
                        <div
                          class="float-right down-number"
                          v-if="sale_cate_rank_info.last_compare == 0"
                        >
                          {{ sale_cate_rank_info.last_compare }}
                        </div>
                        <div
                          class="float-right down-number"
                          v-if="sale_cate_rank_info.last_compare == '--'"
                        >
                          {{ sale_cate_rank_info.last_compare }}
                        </div>
                      </div>
                    </span>
                  </div>
                  <!-- 折线图 -->
                  <div style="margin-top: 20px">
                    <div
                      id="broken-line1"
                      v-if="brokenLineData1.length > 0"
                    ></div>
                    <div class="no-data" v-else>暂无数据</div>
                  </div>
                </div>
              </div>
              <div
                class="model-bg"
                style="height: 450px; position: relative"
                v-else
              >
                <ModelNoPower
                  type="noPower"
                  :id="salePowerID"
                  :organizeId="$refs.head.publishInfo.organization_id"
                ></ModelNoPower>
              </div>
            </div>
            <!-- 渠道数据 -->
            <div v-if="tabKey == '1' && showChannel">
              <div
                class="model-container"
                v-for="(item, index) in channelList"
                :key="index"
              >
                <div class="model-bg">
                  <div class="channel-data clearfix">
                    <div
                      class="float-left"
                      style="width: 100px; text-align: center; padding: 34px 0"
                      v-if="
                        item.platform_name == '其他' ||
                        item.platform_name == '拼多多'
                      "
                    >
                      <div class="channel-title">{{ item.platform_name }}</div>
                    </div>
                    <div
                      class="float-left"
                      style="width: 100px; text-align: center; padding: 20px 0"
                      v-else
                    >
                      <div class="channel-title">{{ item.platform_name }}</div>
                      <div
                        class="click-font"
                        style="margin-top: 10px"
                        @click="openShop(item)"
                      >
                        进入店铺
                      </div>
                    </div>
                    <span
                      style="margi-left: 15px; margin-right: 20px"
                      class="data-block float-left"
                    >
                      <div class="clearfix">
                        <div class="float-left" style="width: 120px">
                          <div>
                            <a-icon type="line-chart" />
                            <span class="secondary-font">销售指数</span>
                          </div>
                          <div class="data-font" v-if="item.sale_amount">
                            {{ item.sale_amount.toLocaleString() }}
                          </div>
                          <div class="data-font" v-else>0</div>
                        </div>
                        <div class="float-right" style="width: 135px">
                          <div class="clearfix compare">
                            <div class="float-left">占比</div>
                            <div
                              class="float-right main-number"
                              v-if="item.sale_ratio"
                            >
                              {{
                                item.sale_ratio == "--"
                                  ? item.sale_ratio
                                  : (item.sale_ratio * 100).toFixed(2) + "%"
                              }}
                            </div>
                            <div class="float-right main-number" v-else>--</div>
                          </div>
                          <div class="clearfix compare" style="width: 135px">
                            <div class="float-left" v-if="dateType == 1">
                              昨日对比
                            </div>
                            <div class="float-left" v-if="dateType == 2">
                              上周对比
                            </div>
                            <div class="float-left" v-if="dateType == 3">
                              上月对比
                            </div>
                            <div class="float-left" v-if="dateType == 4">
                              上年对比
                            </div>
                            <div
                              class="float-right up-number"
                              v-if="item.pre_compare > 0"
                            >
                              {{ item.pre_compare }}% ↑
                            </div>
                            <div
                              class="float-right down-number"
                              v-if="item.pre_compare < 0"
                            >
                              {{ item.pre_compare * -1 }}% ↓
                            </div>
                            <div
                              class="float-right down-number"
                              v-if="item.pre_compare == 0"
                            >
                              {{ item.pre_compare }}
                            </div>
                            <div
                              class="float-right down-number"
                              v-if="item.pre_compare == '--'"
                            >
                              {{ item.pre_compare }}
                            </div>
                          </div>
                          <div class="clearfix compare" style="width: 135px">
                            <div class="float-left">上年同期</div>
                            <div
                              class="float-right up-number"
                              v-if="item.last_compare > 0"
                            >
                              {{ item.last_compare }}% ↑
                            </div>
                            <div
                              class="float-right down-number"
                              v-if="item.last_compare < 0"
                            >
                              {{ item.last_compare * -1 }}% ↓
                            </div>
                            <div
                              class="float-right down-number"
                              v-if="item.last_compare == 0"
                            >
                              {{ item.last_compare }}
                            </div>
                            <div
                              class="float-right down-number"
                              v-if="item.last_compare == '--'"
                            >
                              {{ item.last_compare }}
                            </div>
                          </div>
                        </div>
                      </div>
                    </span>
                    <!-- 图表 -->
                    <div class="float-left">
                      <div
                        style="width: 600px"
                        :id="'channel-chart' + (index + 1)"
                      ></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="model-container" v-if="tabKey == '1' && powerType == 1">
              <div class="model-bg channel-text" @click="changeChannel">
                {{ showChannel ? "隐藏渠道数据" : "展开渠道数据" }}
              </div>
            </div>
            <!-- 生命周期走势 -->
            <div class="model-container life-cycle" v-if="tabKey == '2'">
              <div class="model-bg" v-if="lifePower">
                <div class="section-title model-bg">生命周期走势</div>
                <div class="data-choose clearfix model-bg">
                  <div class="float-left">
                    <span class="data-block">
                      <div>
                        <a-icon type="line-chart" />
                        <span class="secondary-font">累计销售指数</span>
                      </div>
                      <div class="data-font">
                        {{ sale_type.toLocaleString() }}
                      </div>
                    </span>
                    <span class="data-block">
                      <div>
                        <a-icon type="line-chart" />
                        <span class="secondary-font">上市日期</span>
                      </div>
                      <div class="data-font">
                        {{ goodsInfo.publish_date }}
                        <span class="small" v-if="publish_duration > 0"
                          >({{ publish_duration }}个月)</span
                        >
                        <span class="small" v-else>(预售中)</span>
                      </div>
                    </span>
                  </div>
                  <div class="float-right">
                    <div
                      :class="close1 ? 'set-compare active' : 'set-compare'"
                      @click.stop="show1 = true"
                    >
                      <div class="names">{{ text1 }}</div>
                      <a-icon
                        type="close"
                        v-if="close1"
                        @click.stop="delete1"
                      />
                      <div class="search" v-if="show1">
                        <div style="padding: 0 10px">
                          <a-input
                            placeholder="搜索品种名称、ISBN"
                            v-model="inputVal1"
                            @input="onSearch1"
                          />
                        </div>
                        <div class="list">
                          <div
                            class="content"
                            v-for="(item1, index1) in goodshList1"
                            :key="index1"
                            @click.stop="onSelect1(item1, index1)"
                          >
                            <img
                              :src="item1.cover_pic"
                              alt
                              style="width: 20px; height: 20px"
                              v-if="item1.cover_pic"
                            />
                            <span
                              v-else
                              class="no-pic"
                              style="min-width: 20px; min-height: 20px"
                            ></span>
                            <span class="title" :title="item1.title">{{
                              item1.title
                            }}</span>
                          </div>
                        </div>
                        <div
                          style="text-align: center; margin-top: 10px"
                          v-if="searchLoading"
                        >
                          <a-spin tip></a-spin>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 折线图 -->
                <div style="padding: 15px">
                  <div id="broken-line2"></div>
                  <!-- <div id="slider"></div> -->
                </div>
              </div>
              <div
                class="model-bg"
                v-else
                style="height: 450px; position: relative"
              >
                <ModelNoPower
                  type="noPower"
                  :id="lifePowerID"
                  :organizeId="$refs.head.publishInfo.organization_id"
                ></ModelNoPower>
              </div>
            </div>
            <!-- 读者画像 -->
            <div v-if="tabKey == '3'">
              <div v-if="readerPower">
                <!-- 读者概况 -->
                <div class="model-container life-cycle">
                  <div class="model-bg">
                    <div class="section-title">读者概况</div>
                    <div class="data-choose" style="padding: 20px 15px">
                      <span class="data-block">
                        <div>
                          <a-icon type="line-chart" />
                          <span class="secondary-font">读者基数</span>
                        </div>
                        <div class="data-font">
                          {{ readerBase.toLocaleString() }}
                        </div>
                      </span>
                      <span class="data-block">
                        <div>
                          <a-icon type="line-chart" />
                          <span class="secondary-font">人均购买</span>
                        </div>
                        <div class="data-font">{{ readerAverage }}本</div>
                      </span>
                    </div>
                  </div>
                </div>
                <div v-if="showReader">
                  <!-- 基础特征 -->
                  <div class="model-container basic">
                    <div class="model-bg">
                      <div class="section-title">基础特征</div>
                      <div class="feature">
                        <div class="clearfix">
                          <div class="float-left" style="width: 500px">
                            <div style="font-size: 12px">性别分布</div>
                            <div v-if="ringData1.length > 0">
                              <div
                                id="ring1"
                                style="
                                  width: 400px;
                                  margin-top: 20px;
                                  margin-left: 30px;
                                "
                              ></div>
                            </div>
                            <div style="width: 500px" v-else>
                              <div class="no-data">
                                数据量较小，暂不支持分析
                              </div>
                            </div>
                            <div style="margin-top: 20px; font-size: 12px">
                              近一年消费
                            </div>
                            <div v-if="ringData2.length > 0">
                              <div
                                id="ring2"
                                style="
                                  width: 266px;
                                  margin-left: 90px;
                                  margin-top: 20px;
                                "
                              ></div>
                              <div class="column" style="width: 270px">
                                <a-row type="flex" justify="space-around">
                                  <a-col
                                    v-for="(item, index) in ringData2"
                                    :key="index"
                                  >
                                    <div class="column-num">
                                      {{ item.value }}%
                                    </div>
                                    <div class="column-name">
                                      {{ item.name }}
                                    </div>
                                  </a-col>
                                </a-row>
                              </div>
                            </div>
                            <div style="width: 500px" v-else>
                              <div class="no-data">
                                数据量较小，暂不支持分析
                              </div>
                            </div>
                          </div>
                          <div
                            class="float-left"
                            style="margin-left: 10px; width: 500px"
                          >
                            <div style="margin-left: 40px; font-size: 12px">
                              年龄分布
                            </div>
                            <div v-if="columnData1.length > 0">
                              <div
                                id="column1"
                                style="
                                  width: 400px;
                                  margin-left: 90px;
                                  margin-top: 20px;
                                "
                              ></div>
                              <div class="column">
                                <a-row>
                                  <a-col
                                    :span="4"
                                    v-for="(item, index) in columnData1"
                                    :key="index"
                                  >
                                    <div class="column-num">
                                      {{ item.value }}%
                                    </div>
                                    <div class="column-name">
                                      {{ item.name }}
                                    </div>
                                  </a-col>
                                </a-row>
                              </div>
                            </div>
                            <div style="width: 500px; margin-left: 38px" v-else>
                              <div class="no-data">
                                数据量较小，暂不支持分析
                              </div>
                            </div>
                            <div
                              style="
                                margin-top: 45px;
                                margin-left: 40px;
                                font-size: 12px;
                              "
                            >
                              <span
                                style="
                                  display: inline-block;
                                  vertical-align: top;
                                  padding-top: 1px;
                                "
                                >城市层级</span
                              >
                              <span
                                style="cursor: pointer; font-size: 15px"
                                @click="openModal"
                              >
                                <svg class="icon" aria-hidden="true">
                                  <use xlink:href="#icon-tips" />
                                </svg>
                              </span>
                            </div>
                            <div v-if="columnData2.length > 0">
                              <div
                                id="column2"
                                style="
                                  width: 400px;
                                  margin-left: 90px;
                                  margin-top: 20px;
                                "
                              ></div>
                            </div>
                            <div style="width: 500px; margin-left: 38px" v-else>
                              <div class="no-data">
                                数据量较小，暂不支持分析
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 地域 -->
                  <div class="model-container">
                    <div class="model-bg">
                      <div class="section-title">地域</div>
                      <div
                        class="clearfix"
                        style="padding-bottom: 15px"
                        v-if="barData1.length > 0"
                      >
                        <div
                          class="float-left"
                          style="position: relative; margin-top: 15px"
                        >
                          <div
                            id="map"
                            style="height: 284px; width: 520px"
                          ></div>
                        </div>
                        <div
                          class="float-left"
                          style="width: 500px; margin-left: 50px"
                        >
                          <p style="margin-top: 15px; font-size: 12px">
                            地域（省）
                          </p>
                          <div id="bar-chart1"></div>
                        </div>
                      </div>
                      <div class="no-data" v-else>数据量较小，暂不支持分析</div>
                    </div>
                  </div>
                  <!-- 偏好 -->
                  <div class="model-container">
                    <div class="model-bg">
                      <div class="section-title">偏好</div>
                      <div
                        class="clearfix"
                        style="padding: 10px 15px 15px 15px"
                      >
                        <div
                          class="float-left"
                          style="width: 500px; margin-right: 45px"
                        >
                          <p style="font-size: 12px">类目偏好</p>
                          <div v-if="barData2.length > 0">
                            <div id="bar-chart2"></div>
                          </div>
                          <div class="no-data" v-else>
                            数据量较小，暂不支持分析
                          </div>
                        </div>
                        <div class="float-left" style="width: 500px">
                          <p style="font-size: 12px">作家偏好</p>
                          <div v-if="barData3.length > 0">
                            <div id="bar-chart3"></div>
                          </div>
                          <div class="no-data" v-else>
                            数据量较小，暂不支持分析
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-else class="model-container">
                  <div class="model-bg">
                    <div class="no-data">数据不足</div>
                  </div>
                </div>
              </div>
              <div v-else>
                <div class="model-container">
                  <div
                    class="model-bg"
                    style="height: 450px; position: relative"
                  >
                    <ModelNoPower
                      type="noPower"
                      :id="readerPowerID"
                      :organizeId="$refs.head.publishInfo.organization_id"
                    ></ModelNoPower>
                  </div>
                </div>
              </div>
            </div>
            <!-- 关联逻辑 -->
            <div v-if="tabKey == '4'">
              <div class="model-container">
                <div
                  v-if="relationPower"
                  class="model-bg"
                  style="min-height: 312px"
                >
                  <div class="section-title">
                    关联品种
                    <a-popover
                      trigger="click"
                      placement="topLeft"
                      destroyTooltipOnHide
                      :align="{ offset: [-6, 3] }"
                    >
                      <template slot="content">
                        <div style="font-size: 12px; color: #7789af">
                          基于真实订单中合并下单的品种数据，由系统计算品种关联度。
                        </div>
                      </template>
                      <span
                        style="
                          cursor: pointer;
                          color: #93a2bf;
                          line-height: normal;
                          font-size: 16px;
                          display: inline-block;
                          vertical-algn: middle;
                        "
                      >
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-tips" />
                        </svg>
                      </span>
                    </a-popover>
                  </div>
                  <div class="table">
                    <table style="table-layout: fixed">
                      <colgroup>
                        <col width="50" />
                        <col width="240" />
                        <col width="160" />
                        <col width="140" />
                        <col width="330" />
                        <col width="130" />
                      </colgroup>
                      <thead>
                        <tr>
                          <td>排名</td>
                          <td>品种</td>
                          <td>作者</td>
                          <td>出版社</td>
                          <td>类目</td>
                          <td style="text-align: right">关联度</td>
                        </tr>
                      </thead>
                      <tbody v-if="relateList.length > 0">
                        <tr v-for="(item, index) in relateList" :key="index">
                          <td>{{ item.rank }}</td>
                          <td>
                            <div class="goods-desc">
                              <span class="goods-image" v-if="item.cover_pic">
                                <img
                                  :src="item.cover_pic"
                                  alt
                                  style="width: 40px; height: 40px"
                                />
                              </span>
                              <span
                                v-else
                                class="no-pic"
                                style="min-width: 40px; min-height: 40px"
                              ></span>
                              <span
                                class="click-font goods-name"
                                @click.stop="$toDetail(item.goods_id)"
                                >{{ item.goods_name }}</span
                              >
                            </div>
                          </td>
                          <td>
                            <div class="author">
                              <div
                                class="author-name"
                                v-if="item.authors.length == 0"
                              >
                                {{ item.goods_author }}
                              </div>
                              <div
                                class="author-name click-font"
                                v-if="item.authors.length == 1"
                                @click.stop="
                                  $toAuthor(item.authors[0].author_id)
                                "
                              >
                                {{ item.goods_author }}
                              </div>
                              <div
                                class="author-name click-font"
                                v-if="item.authors.length > 1"
                                @click.stop="openAuthor(item, index)"
                              >
                                {{ item.goods_author }}
                              </div>
                              <div class="author-list" v-if="item.active">
                                <div v-if="item.authors.length > 0">
                                  <div
                                    class="author-item click"
                                    v-for="(aitem, aindex) in item.authors"
                                    :key="aindex"
                                    @click.stop="$toAuthor(aitem.author_id)"
                                  >
                                    {{ aitem.name }}
                                  </div>
                                </div>
                                <div v-else>
                                  <div class="author-item">
                                    未查询到对应作者信息
                                  </div>
                                </div>
                              </div>
                            </div>
                          </td>
                          <td>{{ item.publisher_name }}</td>
                          <td>
                            <span>{{ item.cate_node_2 }}</span>
                            <span v-if="item.cate_node_3"
                              >>{{ item.cate_node_3 }}</span
                            >
                          </td>
                          <td style="text-align: right">
                            <span class="percent" v-if="item.support > 0"
                              >{{ item.support }}%</span
                            >
                            <span class="green" v-else-if="item.support < 0"
                              >{{ item.support }}%</span
                            >
                            <span v-else>--</span>
                          </td>
                        </tr>
                      </tbody>
                      <tbody v-else>
                        <tr>
                          <td colspan="6">
                            <a-empty />
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
                <div
                  class="model-bg"
                  style="height: 450px; position: relative"
                  v-else
                >
                  <ModelNoPower
                    type="noPower"
                    :id="relationPowerID"
                    :organizeId="$refs.head.publishInfo.organization_id"
                  ></ModelNoPower>
                </div>
              </div>
            </div>
            <!-- 详细信息 -->
            <div v-if="tabKey == '5'">
              <div v-if="goodsDetailPower">
                <!-- 关联标签 -->
                <div
                  class="model-container"
                  v-if="goodsInfo.tag_list.length > 0"
                >
                  <div class="model-bg">
                    <div class="section-title">关联标签</div>
                    <div class="info-desc">
                      <span
                        class="data-tab data-tab-night"
                        v-for="(item, index) in goodsInfo.tag_list"
                        :key="index"
                        >{{ item.tag_name }}</span
                      >
                    </div>
                  </div>
                </div>
                <!-- 出版信息 -->
                <div class="model-container">
                  <div class="model-bg">
                    <div class="section-title">出版信息</div>
                    <div class="detail-desc">
                      <div class="content">
                        <span class="title">出版社</span>
                        <span class="desc">{{
                          goodsInfo.publisher_short
                        }}</span>
                      </div>
                      <div class="content">
                        <span class="title">ISBN</span>
                        <span class="desc">{{ goodsInfo.isbn }}</span>
                      </div>
                      <div class="content">
                        <span class="title">作者</span>
                        <span class="desc">{{ goodsInfo.author }}</span>
                      </div>
                      <div class="content">
                        <span class="title">出版日期</span>
                        <span class="desc">{{ goodsInfo.publish_date }}</span>
                      </div>
                      <div class="content">
                        <span class="title">包装</span>
                        <span class="desc">--</span>
                      </div>
                      <div class="content">
                        <span class="title">页数</span>
                        <span class="desc">--</span>
                      </div>
                      <div class="content">
                        <span class="title">开本</span>
                        <span class="desc">{{
                          goodsInfo.format ? goodsInfo.format : "--"
                        }}</span>
                      </div>
                      <div class="content">
                        <span class="title">字数</span>
                        <span class="desc">--</span>
                      </div>
                      <div class="content">
                        <span class="title">印张数</span>
                        <span class="desc">{{
                          goodsInfo.yz ? goodsInfo.yz : "--"
                        }}</span>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 编辑推荐语 -->
                <div class="model-container" v-if="goodsInfo.bjtj">
                  <div class="model-bg">
                    <div class="section-title">编辑推荐语</div>
                    <div class="info-desc" v-html="goodsInfo.bjtj"></div>
                  </div>
                </div>
                <!-- 内容提要 -->
                <div class="model-container" v-if="goodsInfo.nrty">
                  <div class="model-bg">
                    <div class="section-title">内容提要</div>
                    <div class="info-desc" v-html="goodsInfo.nrty"></div>
                  </div>
                </div>
                <!-- 作者简介 -->
                <div class="model-container" v-if="authorDesc">
                  <div class="model-bg">
                    <div class="section-title">作者简介</div>
                    <div class="info-desc">
                      <div
                        style="margin-bottom: 5px"
                        v-for="(item, index) in goodsInfo.authors"
                        :key="index"
                      >
                        {{ item.description }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="model-container" v-else>
                <div class="model-bg" style="height: 450px; position: relative">
                  <ModelNoPower
                    type="noPower"
                    :id="goodsDetailPowerID"
                    :organizeId="$refs.head.publishInfo.organization_id"
                  ></ModelNoPower>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 展示城市层级弹层 -->
    <a-modal
      v-model="cityModal"
      width="1000px"
      :footer="null"
      :title="null"
      destroyOnClose
      on-ok="readhandleOk"
    >
      <div class="popup">
        <div class="city">
          <div class="city-title">一线城(4个)</div>
          <div class="city-content">北京、上海、广州、深圳</div>
        </div>
        <div class="city">
          <div class="city-title">新一线城(15个)</div>
          <div class="city-content">
            成都、重庆、杭州、武汉、西安、郑州、青岛、长沙、天津、苏州、南京、东莞、沈阳、合肥、佛山
          </div>
        </div>
        <div class="city">
          <div class="city-title">二线城(30个)</div>
          <div class="city-content">
            昆明、福州、无锡、厦门、哈尔滨、长春、南昌、济南、宁波、大连、贵阳、温州、石家庄、泉州、南宁、金华、常州、珠海、惠州、嘉兴、南通、中山、保定、兰州、台州、徐州、太原、绍兴、烟台、廊坊
          </div>
        </div>
        <div class="city">
          <div class="city-title">三线城(70个)</div>
          <div class="city-content">
            海口、汕头、潍坊、扬州、洛阳、乌鲁木齐、临沂、唐山、镇江、盐城、湖州、赣州、漳州、揭阳、江门、桂林、邯郸、泰州、济宁、呼和浩特、咸阳、芜湖、三亚、阜阳、淮安、遵义、银川、衡阳、上饶、柳州、淄博、莆田、绵阳、湛江、商丘、宜昌、沧州、连云港、南阳、蚌埠、驻马店、滁州、邢台、潮州、秦皇岛、肇庆、荆州、周口、马鞍山、清远、宿州、威海、九江、新乡、信阳、襄阳、岳阳、安庆、菏泽、宜春、黄冈、泰安、宿迁、株洲、宁德、鞍山、南充、六安、大庆、舟山
          </div>
        </div>
        <div class="city">
          <div class="city-title">四线城(90个)</div>
          <div class="city-content">
            常德、渭南湖、孝感、丽水、运城、德州、张家口、鄂尔多斯、阳江、泸州、丹东、曲靖、乐山、许昌、湘潭、晋中、安阳、齐齐哈尔、北海、宝鸡、抚州、景德镇、延安、三明、抚顺、亳州、日照、西宁、衢州、拉萨、淮北、焦作、平顶山、滨州、吉安、濮阳、眉山、池州、荆门、铜仁、长治、衡水、铜陵、承德、达州、邵阳、德阳、龙岩、南平、淮南、黄石、营口、东营、吉林、韶关、枣庄、包头、怀化、宣城、临汾、聊城、梅州、盘锦、锦州、榆林、玉林、十堰、汕尾、咸宁、宜宾、永州、益阳、黔南州、黔东南、恩施、红河、大理、大同、鄂州、忻州、吕梁、黄山、开封、郴州、茂名、漯河、葫芦岛、河源、娄底、延边
          </div>
        </div>
        <div class="city">
          <div class="city-title">五线城(128个)</div>
          <div class="city-content">
            汉中、辽阳、四平、内江、六盘水、安顺、新余、牡丹江、晋城、自贡、三门峡、赤峰、本溪、防城港、铁岭、随州、广安、广元、天水、遂宁、萍乡、西双版纳、绥化、鹤壁、湘西、松原、阜新、酒泉、张家界、黔西南、保山、昭通、河池、来宾、玉溪、梧州、鹰潭、钦州、云浮、佳木斯、克拉玛依、呼伦贝尔、贺州、通化、阳泉、朝阳、百色、毕节、贵港、丽江、安康、通辽、德宏、朔州、伊犁、文山、楚雄、嘉峪关、凉山、资阳、锡林郭勒盟、雅安、普洱、崇左、庆阳、巴音郭楞（巴州）、乌兰察布、白山、昌吉、白城、兴安盟、定西、喀什、白银、陇南、巴彦淖尔、巴中、鸡西、乌海、临沧、海东、张掖、商洛、黑河、哈密、吴忠、攀枝花、双鸭山、阿克苏、石嘴山、阿拉善盟、海西、平凉、林芝、固原、武威、儋州、吐鲁番、甘孜、辽源、临夏、铜川、金昌、鹤岗、伊春、中卫、怒江、和田、迪庆、甘南、阿坝、大兴安岭、七台河、山南、日喀则、塔城、博尔塔拉、昌都、阿勒泰、玉树、海南、黄南、果洛、克孜勒苏、阿里、海北、那曲、三沙
          </div>
        </div>
        <div style="padding: 0 280px; margin-top: 20px">
          <div id="cityChart" style="width: 400px"></div>
        </div>
      </div>
    </a-modal>
    <!-- 修改关联作者弹窗 -->
    <a-modal
      v-model="authorConnect"
      width="600px"
      title="修改关联作者"
      destroyOnClose
      on-ok="readhandleOk"
    >
      <template slot="footer">
        <a-button key="submit" type="primary" @click="editAuthor"
          >修改</a-button
        >
      </template>
      <div class="popup" @click="showResult = false;">
        <div class="clearfix">
          <div class="float-left" style="line-height:32px;">关联作者</div>
          <div class="float-left">
            <div style="width: 460px;margin-left:10px; position: relative">
              <a-input
                placeholder="搜索作者名称"
                @input="searchAuthor"
                @focus="searchAuthor"
                @click.stop="inputClick"
                v-model="inputAuthor"
              >
              </a-input>
              <div class="search-result" v-if="showResult">
                <div class="list" v-if="dataSourceAuthor.length > 0">
                  <div
                    class="result-content"
                    v-for="(item, index) in dataSourceAuthor"
                    :key="index"
                    @click.stop="onSelectAuthor(item, index)"
                  >
                    <span class="result-title" :title="item.name">{{
                      item.name
                    }}（{{item.author_id}}）</span>
                  </div>
                </div>
                <div
                  class="no-result"
                  v-if="dataSourceAuthor.length == 0 && showAbout"
                >
                  没有相关作者
                </div>
                <div
                  style="text-align: center; margin-top: 50px"
                  v-if="searchLoadingAuthor"
                >
                  <a-spin tip></a-spin>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="desc-title" v-if="currenConnectList.length > 0">已关联作者</div>
        <div class="authors-content">
          <div class="authors-items" v-for="(aitem,aindex) in currenConnectList" :key="aindex">
            <div class="authors-image">
              <img :src="aitem.photo" width="40" height="40" alt="" v-if="aitem.photo">
              <span v-else class="no-pic" style="min-width: 40px; min-height: 40px"></span>
            </div>
            <div class="authors-name">{{aitem.name}}（{{aitem.author_id}}）</div>
            <div class="click-font" @click="removeAuthor(1,aitem,aindex)">移除</div>
          </div>
        </div>
        <div class="desc-title" v-if="chooseAuthorList.length > 0">待关联作者</div>
        <div class="authors-content authors-scroll">
          <div class="authors-items" v-for="(aitem,aindex) in chooseAuthorList" :key="aindex">
            <div class="authors-image">
              <img :src="aitem.photo" width="40" height="40" alt="" v-if="aitem.photo">
              <span v-else class="no-pic" style="min-width: 40px; min-height: 40px"></span>
            </div>
            <div class="authors-name">{{aitem.name}}（{{aitem.author_id}}）</div>
            <div class="click-font" @click="removeAuthor(2,aitem,aindex)">移除</div>
          </div>
        </div>
      </div>
    </a-modal>
    <Loading ref="load" :show="1" :isLoading="isLoading || otherLoading"></Loading>
  </div>
</template>
<style scoped lang="scss" src="@/style/scss/pages/publish/detail.scss"></style>

<script>
import { Chart } from "@antv/g2";
import DataSet from "@antv/data-set";
import { Scene } from "@antv/l7";
import { CountryLayer } from "@antv/l7-district";
import { Mapbox } from "@antv/l7-maps";
import {
  TOP_GOODS_INFO,
  TOP_GOODS_KERNELDATA,
  TOP_GOODS_HISTORYCHART,
  TOP_GOODS_HISTORY,
  TOP_SEARCH,
  TOP_GOODS_READER_BASE,
  TOP_GOODS_RELATION,
  TOP_GOODS_PLATFORMCHART,
} from "../../apis/publish.js";
import { INDUSTRY_AUTHOR_SEARCH,INDUSTRY_GOODS_AUTHOR_CHANGE } from "../../apis/industry.js";
import {
  PUBLISHER_COMPETE_ADD,
  PUBLISHER_COMPETE_DELETE,
  COMPETE_MONITOR_SELF_ADD,
  COMPETE_MONITOR_SELF_DELETE,
} from "../../apis/compete.js";
export default {
  data() {
    return {
      powerType: 2,
      goodsDetailPower: true,
      salePower: true,
      lifePower: true,
      readerPower: true,
      relationPower: true,
      goodsDetailPowerID: 0,
      salePowerID: 0,
      lifePowerID: 0,
      readerPowerID: 0,
      relationPowerID: 0,
      radarData: [
        { item: "历史评分", 本品: 0 },
        { item: "销售评分", 本品: 0 },
        { item: "读者评分", 本品: 0 },
        { item: "热点评分", 本品: 0 },
        { item: "趋势评分", 本品: 0 },
      ],
      brokenLineData1: [],
      saleTotalList: [],
      saleRankList: [],
      saleCateList: [],
      brokenLineData2: [],
      goodsData: [],
      otherGoods: [],
      tabKey: "1",
      value: "",
      dataSource: [],
      goods_id: 0,
      radarEmpty: true,
      radarChart: null,
      radardv: null,
      goodsInfo: {
        fixed_price: 0,
        authors: [],
        tag_list: [],
      },
      dateType: 2,
      typeText: "sale_total",
      sale_total_info: {
        // 销售指数
        now: 0, // 现在
        pre_compare: 0, // 上一周期对比
        last_compare: 0, // 上年同期
      },
      sale_rank_info: {
        // 行业排名
        now: 0,
        pre_compare: 0,
        last_compare: 0,
      },
      sale_cate_rank_info: {
        // 类目排名
        now: 0,
        pre_compare: 0,
        last_compare: 0,
      },
      dateLifeType: 3,
      canLeft: false,
      canRight: true,
      sale_type: 0,
      publish_duration: 0,
      lineChart1: null,
      lineChart2: null,
      sliderChart: null,
      searchLoading: false,
      readerBase: 0,
      readerAverage: 0,
      ringData1: [],
      ringData2: [],
      columnData1: [],
      columnData2: [],
      barData1: [],
      barData2: [],
      barData3: [],
      barMapData: [],
      text1: "+设置对比",
      close1: false,
      inputVal1: "",
      show1: false,
      goodshList1: [],
      relateList: [],
      isLoading: true,
      otherLoading: true,
      authorActive: false,
      showCompete: false,
      eventList: [],
      timeList: [],
      cityModal: false,
      // 渠道数据
      showChannel: false,
      channelList: [],
      channelChart: [null, null, null, null, null, null, null],
      tmList: [],
      jdList: [],
      ddList: [],
      wphList: [],
      pddList: [],
      gwList: [],
      otherList: [],
      timeList: [],
      channelFirst: true,
      detailFix: false,
      authorDesc: false,
      isOwnPublish: true,
      showReader: false,
      authorConnect: false,
      // 调整作者
      dataSourceAuthor: [],
      showResult: false,
      searchLoadingAuthor: false,
      showAbout: false,
      inputAuthor: "",
      chooseAuthorList:[],
      currenConnectList:[],
    };
  },
  mounted() {
    this.dateType = this.$refs.time.dateType;
    this.goods_id = this.$route.query.goods_id;
    this.powerType = this.$refs.head.accountInfo.type;
    this.getData();
    this.getCoreData();
  },
  methods: {
    // 商品基础信息
    async getData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        organization_id: this.$refs.head.publishInfo.organization_id,
        goods_id: this.goods_id,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await TOP_GOODS_INFO(data);
      if (res.code == 0) {
        if (res.data.pre_sale_goods_id) {
          this.$router.replace({
            name: "detail",
            query: {
              goods_id: res.data.pre_sale_goods_id,
            },
          });
          this.$router.go(0);
          return;
        }
        this.goodsDetailPower = true;
        this.goodsInfo = res.data;
        this.goodsInfo.bjtj = res.data.bjtj.replace(/[\r\n]/g, "</br>");
        this.goodsInfo.nrty = res.data.nrty.replace(/[\r\n]/g, "</br>");
        this.goodsInfo.authors.map((value, key) => {
          if (value.description) {
            this.authorDesc = true;
          }
        });
        this.showCompete = this.$refs.head.publishInfo.supplier_id;
        if (
          this.$refs.head.publishInfo.supplier_id != res.data.supplier_id &&
          this.$refs.head.accountInfo.type != 1
        ) {
          this.isOwnPublish = false;
          this.tabKey = "5";
        } else {
          this.isOwnPublish = true;
        }
        let _count = 0;
        this.radarData = this.radarData.map((value, key) => {
          if (value.item == "历史评分") {
            value.本品 = res.data.score_chart.score_all;
          } else if (value.item == "销售评分") {
            value.本品 = res.data.score_chart.score_sale;
          } else if (value.item == "读者评分") {
            value.本品 = res.data.score_chart.score_reader;
          } else if (value.item == "热点评分") {
            value.本品 = res.data.score_chart.score_hot;
          } else if (value.item == "趋势评分") {
            value.本品 = res.data.score_chart.score_life;
          }
          return value;
        });
        for (let key in res.data.score_chart) {
          if (res.data.score_chart[key] > 0) {
            _count++;
          }
        }
        if (_count > 3) {
          this.radarEmpty = true;
        } else {
          this.radarEmpty = false;
        }
        let _this = this;
        if (this.radarEmpty) {
          this.$nextTick(()=>{
            if(_this.radarChart){
              _this.radarChart.destroy();
              _this.initRadarData();
            }else{
              _this.initRadarData();
            }
          })
        }
        this.$nextTick(()=>{
          _this.isLoading = false;
        })
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.goodsDetailPower = false;
          this.goodsDetailPowerID = res.data;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 获取销售走势核心数据
    async getCoreData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        goods_id: this.goods_id,
        period: this.$refs.time.cycle,
        date_type: this.$refs.time.dateType,
        start_date: this.$refs.time.oneDay,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await TOP_GOODS_KERNELDATA(data);
      if (res.code == 0) {
        this.salePower = true;
        this.sale_total_info = res.data.kernel_data.sale_total_info;
        this.sale_rank_info = res.data.kernel_data.sale_rank_info;
        this.sale_cate_rank_info = res.data.kernel_data.sale_cate_rank_info;
        let _arr1 = [],
          _arr2 = [];
        this.saleTotalList = [];
        this.saleRankList = [];
        this.saleCateList = [];
        this.eventList = [];
        this.timeList = [];
        this.eventList = res.data.chart_data.event_data;
        if (res.data.chart_data.sale_total.current_data) {
          res.data.chart_data.sale_total.current_data.map((value, key) => {
            let _obj = {};
            _obj.month = value.date.toString();
            _obj.city = "当期";
            _obj.temperature = value.value;
            if (value.week_range) {
              _obj.range = value.week_range;
            }
            this.timeList.unshift(value.date.toString());
            _arr1.unshift(_obj);
          });
        }
        if (res.data.chart_data.sale_total.last_data) {
          res.data.chart_data.sale_total.last_data.map((value, key) => {
            let _obj = {};
            _obj.month = value.date.toString();
            _obj.city = "上年同期";
            _obj.temperature = value.value;
            if (value.week_range) {
              _obj.range = value.week_range;
            }
            _arr2.unshift(_obj);
          });
        }
        _arr1.map((value, key) => {
          if (_arr1.length > key) this.saleTotalList.push(_arr1[key]);
          if (_arr2.length > key) this.saleTotalList.push(_arr2[key]);
        });
        _arr1 = [];
        _arr2 = [];
        if (res.data.chart_data.sale_rank.current_data) {
          res.data.chart_data.sale_rank.current_data.map((value, key) => {
            let _obj = {};
            _obj.month = value.date.toString();
            _obj.city = "当期";
            _obj.temperature = value.value;
            if (value.week_range) {
              _obj.range = value.week_range;
            }
            _arr1.unshift(_obj);
          });
        }
        if (res.data.chart_data.sale_rank.last_data) {
          res.data.chart_data.sale_rank.last_data.map((value, key) => {
            let _obj = {};
            _obj.month = value.date.toString();
            _obj.city = "上年同期";
            _obj.temperature = value.value;
            if (value.week_range) {
              _obj.range = value.week_range;
            }
            _arr2.unshift(_obj);
          });
        }
        _arr1.map((value, key) => {
          if (_arr1.length > key) this.saleRankList.push(_arr1[key]);
          if (_arr2.length > key) this.saleRankList.push(_arr2[key]);
        });
        _arr1 = [];
        _arr2 = [];
        if (res.data.chart_data.cate_rank.current_data) {
          res.data.chart_data.cate_rank.current_data.map((value, key) => {
            let _obj = {};
            _obj.month = value.date.toString();
            _obj.city = "当期";
            _obj.temperature = value.value;
            if (value.week_range) {
              _obj.range = value.week_range;
            }
            _arr1.unshift(_obj);
          });
        }
        if (res.data.chart_data.cate_rank.last_data) {
          res.data.chart_data.cate_rank.last_data.map((value, key) => {
            let _obj = {};
            _obj.month = value.date.toString();
            _obj.city = "上年同期";
            _obj.temperature = value.value;
            if (value.week_range) {
              _obj.range = value.week_range;
            }
            _arr2.unshift(_obj);
          });
        }
        _arr1.map((value, key) => {
          if (_arr1.length > key) this.saleCateList.push(_arr1[key]);
          if (_arr2.length > key) this.saleCateList.push(_arr2[key]);
        });
        _arr1 = [];
        _arr2 = [];
        this.brokenLineData1 = [];
        if (this.typeText == "sale_total") {
          this.brokenLineData1 = this.saleTotalList;
        } else if (this.typeText == "sale_rank") {
          this.brokenLineData1 = this.saleRankList;
        } else if (this.typeText == "sale_ratio") {
          this.brokenLineData1 = this.saleCateList;
        }
        if (this.brokenLineData1.length > 0) {
          let _this = this;
          this.$nextTick(() => {
            _this.otherLoading = false;
            if (_this.lineChart1) {
              _this.lineChart1.destroy();
              _this.initLineData1();
            } else {
              _this.initLineData1();
            }
          });
        } else {
          this.otherLoading = false;
        }
      } else {
        this.otherLoading = false;
        if (res.code == 1009) {
          this.salePower = false;
          this.salePowerID = res.data;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 获取渠道数据
    async getChannel() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        date_type: this.$refs.time.dateType,
        start_date: this.$refs.time.oneDay,
        period: this.$refs.time.cycle,
        goods_id: this.goods_id,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await TOP_GOODS_PLATFORMCHART(data);
      if (res.code == 0) {
        this.showChannel = true;
        this.channelList = [];
        this.tmList = [];
        this.jdList = [];
        this.ddList = [];
        this.wphList = [];
        this.pddList = [];
        this.gwList = [];
        this.otherList = [];
        this.channelList = res.data;
        res.data.map((value, key) => {
          let _arr1 = [],
            _arr2 = [],
            _arr = [];
          value.current_data.map((value1, key1) => {
            let _obj = {};
            _obj.month = value1.date.toString();
            _obj.city = "当期";
            _obj.temperature = value1.value;
            if (value1.week_range) {
              _obj.range = value1.week_range;
            }
            _arr1.unshift(_obj);
          });
          value.last_data.map((value1, key1) => {
            let _obj = {};
            _obj.month = value1.date.toString();
            _obj.city = "上年同期";
            _obj.temperature = value1.value;
            if (value1.week_range) {
              _obj.range = value1.week_range;
            }
            _arr2.unshift(_obj);
          });
          _arr1.map((value1, key1) => {
            if (_arr1.length > key1) _arr.push(_arr1[key1]);
            if (_arr2.length > key1) _arr.push(_arr2[key1]);
          });
          if (value.platform_name == "天猫") {
            this.tmList = _arr;
          } else if (value.platform_name == "京东") {
            this.jdList = _arr;
          } else if (value.platform_name == "当当") {
            this.ddList = _arr;
          } else if (value.platform_name == "官网") {
            this.gwList = _arr;
          } else if (value.platform_name == "唯品会") {
            this.wphList = _arr;
          } else if (value.platform_name == "拼多多") {
            this.pddList = _arr;
          } else if (value.platform_name == "其他") {
            this.otherList = _arr;
          }
        });
        let _this = this;
        this.$nextTick(() => {
          if (_this.channelFirst) {
            _this.initChannel();
          } else {
            for (let i = 0; i < _this.channelChart.length; i++) {
              _this.channelChart[i].destroy();
            }
            _this.initChannel();
          }
          _this.channelFirst = false;
        });
        this.isLoading = false;
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.$refs.head.globalTip(1, "暂无权限", 0);
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 获取生命周期数据
    async getDefault() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        goods_id: this.goods_id,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await TOP_GOODS_HISTORY(data);
      if (res.code == 0) {
        this.lifePower = true;
        this.sale_type = res.data.sale_total;
        this.publish_duration = res.data.publish_duration;
      } else {
        if (res.code == 1009) {
          this.lifePower = false;
          this.lifePowerID = res.data;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 获取生命周期图表数据
    async getLifeData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        goods_id: this.goods_id,
        date_type: this.dateLifeType,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await TOP_GOODS_HISTORYCHART(data);
      if (res.code == 0) {
        this.lifePower = true;
        this.goodsData = [];
        res.data.map((value, key) => {
          let _obj = {};
          _obj.month = value.date.toString();
          _obj.city = "本品";
          _obj.temperature = value.value;
          this.goodsData.push(_obj);
        });
        this.brokenLineData2 = this.goodsData;
        if (this.tabKey == "2") {
          let _this = this;
          this.$nextTick(() => {
            if (_this.lineChart2) {
              _this.lineChart2.destroy();
              _this.initLineData2();
            } else {
              _this.initLineData2();
            }
            _this.otherLoading = false;
          });
        }
      } else {
        this.otherLoading = false;
        if (res.code == 1009) {
          this.lifePower = false;
          this.lifePowerID = res.data;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 获取对比品种生命周期
    async selectOther(id) {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        goods_id: id,
        date_type: this.dateLifeType,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await TOP_GOODS_HISTORYCHART(data);
      if (res.code == 0) {
        this.otherGoods = [];
        res.data.map((value, key) => {
          let _obj = {};
          _obj.month = value.date.toString();
          _obj.city = "对比";
          _obj.temperature = value.value;
          this.otherGoods.push(_obj);
        });
        this.lineArr();
      } else {
        this.$refs.head.globalTip(1, res.message, res.code);
      }
    },
    // 搜索
    async search(val) {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        search: val,
        compete: 1,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await TOP_SEARCH(data);
      if (res.code == 0) {
        if (res.data.search == this.inputVal1) {
          this.goodshList1 = res.data.lists;
        }
        this.searchLoading = false;
      } else {
        this.searchLoading = false;
        this.$refs.head.globalTip(1, res.message, res.code);
      }
    },
    // 读者画像
    async getReaderData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        goods_id: this.goods_id,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await TOP_GOODS_READER_BASE(data);
      if (res.code == 0) {
        this.readerPower = true;
        this.ringData1 = [];
        this.ringData2 = [];
        this.columnData1 = [];
        this.columnData2 = [];
        this.barData1 = [];
        this.barData2 = [];
        this.barData3 = [];
        if (Object.keys(res.data).length > 0) {
          let _total1 = 0,
            _total2 = 0,
            _total3 = 0,
            _total4 = 0;
          this.readerBase = res.data.reader_num;
          this.readerAverage = res.data.reader_avg_buy;
          // 性别分布
          res.data.persona_sex.map((value, key) => {
            _total1 += Number(value.value);
          });
          if (_total1 > 0) {
            for (let i = 0; i < 3; i++) {
              let _obj = {
                value: 0,
              };
              if (i == 0) {
                _obj.name = "男性";
              } else if (i == 1) {
                _obj.name = "女性";
              } else if (i == 2) {
                _obj.name = "未知";
              }
              this.ringData1.push(_obj);
            }
            res.data.persona_sex.map((value, key) => {
              let _num = (Number(value.value) / _total1) * 100;
              _num = _num ? Number(_num.toFixed(2)) : 0;
              if (value.name == "男") {
                this.ringData1[0].value = _num;
              } else if (value.name == "女") {
                this.ringData1[1].value = _num;
              } else if (value.name == "未知") {
                this.ringData1[2].value = _num;
              }
            });
          }
          // 消费能力
          res.data.persona_money.map((value, key) => {
            _total2 += Number(value.value);
          });
          if (_total2 > 0) {
            for (let i = 0; i < 4; i++) {
              let _obj = {
                value: 0,
                type: "this",
              };
              if (i == 0) {
                _obj.name = "30元以下";
              } else if (i == 1) {
                _obj.name = "30-60元";
              } else if (i == 2) {
                _obj.name = "60-100元";
              } else if (i == 3) {
                _obj.name = "100元以上";
              }
              this.ringData2.push(_obj);
            }
            res.data.persona_money.map((value, key) => {
              let _num = (Number(value.value) / _total2) * 100;
              _num = _num ? Number(_num.toFixed(2)) : 0;
              if (value.name == "低消费") {
                this.ringData2[0].value = _num;
              } else if (value.name == "中低消费") {
                this.ringData2[1].value = _num;
              } else if (value.name == "中高消费") {
                this.ringData2[2].value = _num;
              } else if (value.name == "高消费") {
                this.ringData2[3].value = _num;
              }
            });
          }
          // 年龄分布
          res.data.persona_age.map((value, key) => {
            _total3 += Number(value.value);
          });
          if (_total3 > 0) {
            for (let i = 0; i < 6; i++) {
              let _obj = {
                value: 0,
                type: "this",
              };
              if (i == 0) {
                _obj.name = "18-25岁";
              } else if (i == 1) {
                _obj.name = "26-30岁";
              } else if (i == 2) {
                _obj.name = "31-35岁";
              } else if (i == 3) {
                _obj.name = "36-40岁";
              } else if (i == 4) {
                _obj.name = "41-50岁";
              } else if (i == 5) {
                _obj.name = "51岁以上";
              }
              this.columnData1.push(_obj);
            }
            res.data.persona_age.map((value, key) => {
              let _num = (Number(value.value) / _total3) * 100;
              _num = _num ? Number(_num.toFixed(2)) : 0;
              if (value.name == "小年轻") {
                this.columnData1[0].value = _num;
              } else if (value.name == "青年") {
                this.columnData1[1].value = _num;
              } else if (value.name == "青壮年") {
                this.columnData1[2].value = _num;
              } else if (value.name == "中青年") {
                this.columnData1[3].value = _num;
              } else if (value.name == "中年") {
                this.columnData1[4].value = _num;
              } else if (value.name == "中老年") {
                this.columnData1[5].value = _num;
              }
            });
          }
          // 城市层级
          if (res.data.persona_city) {
            res.data.persona_city.map((value, key) => {
              _total4 += Number(value.value);
            });
            if (_total4 > 0) {
              for (let i = 0; i < 6; i++) {
                let _obj = {
                  value: 0,
                };
                if (i == 0) {
                  _obj.name = "一线城市";
                } else if (i == 1) {
                  _obj.name = "二线城市";
                } else if (i == 2) {
                  _obj.name = "三线城市";
                } else if (i == 3) {
                  _obj.name = "四线城市";
                } else if (i == 4) {
                  _obj.name = "五线城市";
                } else if (i == 5) {
                  _obj.name = "新一线城市";
                }
                this.columnData2.push(_obj);
              }
              res.data.persona_city.map((value, key) => {
                let _num = (Number(value.value) / _total4) * 100;
                _num = _num ? Number(_num.toFixed(2)) : 0.0;
                if (value.name == "一线城市") {
                  this.columnData2[0].value = _num;
                } else if (value.name == "二线城市") {
                  this.columnData2[1].value = _num;
                } else if (value.name == "三线城市") {
                  this.columnData2[2].value = _num;
                } else if (value.name == "四线城市") {
                  this.columnData2[3].value = _num;
                } else if (value.name == "五线城市") {
                  this.columnData2[4].value = _num;
                } else if (value.name == "新一线城市") {
                  this.columnData2[5].value = _num;
                }
              });
            }
          }
          this.barData1 = res.data.persona_region.map((value, key) => {
            this.barMapData.push(value.name);
            value.name = value.name;
            return value;
          });
          this.barData2 = res.data.persona_cate.map((value, key) => {
            value.name = value.name;
            return value;
          });
          this.barData3 = res.data.persona_author.map((value, key) => {
            value.name = value.name;
            return value;
          });
          let _this = this;
          if (this.readerBase >= 50) {
            this.showReader = true;
            this.$nextTick(() => {
              if (_this.ringData1.length > 0) {
                _this.initRing1();
              }
              if (_this.columnData1.length > 0) {
                _this.initColumn1();
              }
              if (_this.ringData2.length > 0) {
                _this.initRing2();
              }
              if (_this.columnData2.length > 0) {
                _this.initColumn2();
              }
              if (_this.barData1.length > 0) {
                _this.initMap();
              }
              if (_this.barData1.length > 0) {
                _this.inintBar1();
              }
              if (_this.barData2.length > 0) {
                _this.inintBar2();
              }
              if (_this.barData3.length > 0) {
                _this.inintBar3();
              }
              _this.otherLoading = false;
            });
          } else {
            this.showReader = false;
            this.otherLoading = false;
          }
        } else {
          this.otherLoading = false;
        }
      } else {
        this.otherLoading = false;
        if (res.code == 1009) {
          this.readerPower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 获取关联商品
    async getRelateData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        isbn: this.goodsInfo.isbn,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await TOP_GOODS_RELATION(data);
      if (res.code == 0) {
        this.relateList = [];
        res.data.map((value, key) => {
          value.active = false;
          this.relateList.push(value);
        });
        this.$nextTick(() => {
          this.otherLoading = false;
        });
      } else {
        this.otherLoading = false;
        if (res.code == 1009) {
          this.relationPower = false;
          this.relationPowerID = res.data;
        } else {
        }
        this.$refs.head.globalTip(1, res.message, res.code);
      }
    },
    // 申请关联品种
    async apply() {},
    // 竞品设置
    async competeChange(_type) {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        timestamp: tStamp,
        type: 2,
      };
      if (_type == 1) {
        data.target_id = this.goodsInfo.goods_id;
      } else {
        data.compete_id = this.goodsInfo.compete_id;
      }
      data.sign = this.$getSign(data);
      let res;
      if (_type == 1) {
        res = await PUBLISHER_COMPETE_ADD(data);
      } else {
        res = await PUBLISHER_COMPETE_DELETE(data);
      }
      if (res.code == 0) {
        if (_type == 1) {
          this.$refs.head.globalTip(2, "添加成功", 0);
        } else {
          this.$refs.head.globalTip(2, "移除竞品成功", 0);
        }
        this.getData();
      } else {
        this.$refs.head.globalTip(1, res.message, res.code);
      }
    },
    // 自选关注
    async competeFocusAdd() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        goods_id: this.goodsInfo.goods_id,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await COMPETE_MONITOR_SELF_ADD(data);
      if (res.code == 0) {
        this.$refs.head.globalTip(2, "添加关注成功", 0);
        this.getData();
      } else {
        this.$refs.head.globalTip(1, res.message, res.code);
      }
    },
    // 取消自选关注
    async competeFocusRemove() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        focus_id: this.goodsInfo.focus_id,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await COMPETE_MONITOR_SELF_DELETE(data);
      if (res.code == 0) {
        this.$refs.head.globalTip(2, "取消关注成功", 0);
        this.getData();
      } else {
        this.$refs.head.globalTip(1, res.message, res.code);
      }
    },
    // 搜索作者列表
    async getAuthorData(val) {
      var tStamp = this.$getTimeStamp();
      let data = {
        search: val,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await INDUSTRY_AUTHOR_SEARCH(data);
      if (res.code == 0) {
        this.dataSourceAuthor = [];
        if(this.inputAuthor.length > 0){
          this.dataSourceAuthor = res.data;
        }
        this.searchLoadingAuthor = false;
        this.showAbout = true;
      } else {
        this.searchLoadingAuthor = false;
        this.$refs.head.globalTip(1, res.message, res.code);
      }
    },
    // 修改关联作者
    async editConnectAuthor(delIds,addIds) {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        goods_id: this.goodsInfo.goods_id,
        del_author_ids: delIds,
        add_author_ids: addIds,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await INDUSTRY_GOODS_AUTHOR_CHANGE(data);
      if (res.code == 0) {
        this.authorConnect = false;
        this.$refs.head.globalTip(2, "修改关联作者成功！", 0);
        this.isLoading = true;
        this.getData();
      } else {
        this.$refs.head.globalTip(1, res.message, res.code);
      }
    },
    // 复制isbn
    copyIsbn() {
      var _this = this;
      this.$copyText(_this.goodsInfo.isbn).then(
        function (e) {
          _this.$refs.head.globalTip(2, "复制成功", 0);
        },
        function (e) {
          _this.$refs.head.globalTip(1, "复制失败", 0);
        }
      );
    },
    // 打开关联作者弹窗
    openEdit() {
      this.chooseAuthorList = [];
      this.currenConnectList = [];
      this.currenConnectList = this.goodsInfo.authors?JSON.parse(JSON.stringify(this.goodsInfo.authors)):[];
      this.dataSourceAuthor = [];
      this.showResult = false;
      this.inputAuthor = "";
      this.authorConnect = true;
    },
    // 打开关联作者弹窗--选中作者
    onSelectAuthor(item, index){
      let _count = 0,curren_count = 0,_arr = [...this.currenConnectList,...this.chooseAuthorList];
      _arr.map((value,key)=>{
        if(value.author_id == item.author_id){
          _count ++;
        }
      })
      if(_count){
        this.$refs.head.globalTip(1, "请勿重复选择！", 0);
        return;
      }
      this.goodsInfo.authors.map((value,key)=>{
        if(value.author_id == item.author_id){
          curren_count ++;
        }
      })
      if(curren_count){
        this.currenConnectList.push(item);
      }else{
        this.chooseAuthorList.unshift(item);
      }
      this.showResult = false;
    },
    // 打开关联作者弹窗--修改
    editAuthor() {
      this.showResult = false;
      let _this = this,delArr = [],addArr = [];
      this.goodsInfo.authors.map((value)=>{
        let flag = this.currenConnectList.find((v) => v.author_id == value.author_id);
        if(!flag){
          delArr.push(value.author_id);
        }
      });
      this.chooseAuthorList.map((value)=>{
        addArr.push(value.author_id);
      });
      this.$confirm({
        title: "确认修改关联作者",
        content: "确认修改本品种的关联作者信息，修改后无法撤销。",
        okText: "确认",
        cancelText: "取消",
        okType: "primary",
        onOk() {
          _this.editConnectAuthor(delArr.join(','),addArr.join(','));
        },
        onCancel() {}
      });
    },
    // 打开关联作者弹窗--搜索作者
    searchAuthor() {
      if(this.inputAuthor.length > 0){
        this.dataSourceAuthor = [];
        this.showResult = true;
        this.searchLoadingAuthor = true;
        this.showAbout = false;
        this.getAuthorData(this.inputAuthor);
      }else{
        this.dataSourceAuthor = [];
      }
    },
    // 打开关联作者弹窗--移除作者
    removeAuthor(type,aitem,aindex){
      if(type == 1){
        this.currenConnectList.splice(aindex,1);
      }else{
        this.chooseAuthorList.splice(aindex,1);
      }
      
    },
    inputClick() {},
    openActive() {
      this.authorActive = true;
      this.show1 = false;
      if (this.tabKey == "1") {
        this.$refs.time.showYear = false;
      }
      if (this.tabKey == "4") {
        this.relateList = this.relateList.map((value, key) => {
          value.active = false;
          return value;
        });
      }
    },
    setCompete() {
      var _this = this;
      this.$confirm({
        title: "确认添加监控",
        content:
          "确认将《" +
          this.goodsInfo.title +
          "》设为竞品监控吗？设置后30天内无法取消。",
        okText: "确定",
        cancelText: "取消",
        okType: "primary",
        onOk() {
          _this.competeChange(1);
        },
        onCancel() {},
      });
    },
    setFocusCompete() {
      var _this = this;
      this.$confirm({
        title: "确认添加关注",
        content: "确认将《" + this.goodsInfo.title + "》添加至自选关注？",
        okText: "确定",
        cancelText: "取消",
        okType: "primary",
        onOk() {
          _this.competeFocusAdd();
        },
        onCancel() {},
      });
    },
    cancelCompete() {
      var _this = this;
      this.$confirm({
        title: "确认移除监控",
        content: "确认将《" + this.goodsInfo.title + "》移除监控吗？",
        okText: "确定",
        cancelText: "取消",
        okType: "primary",
        onOk() {
          _this.competeChange(2);
        },
        onCancel() {},
      });
    },
    cancelFocusCompete() {
      var _this = this;
      this.$confirm({
        title: "确认取消关注",
        content: "确认取消关注《" + this.goodsInfo.title + "》吗？",
        okText: "确定",
        cancelText: "取消",
        okType: "primary",
        onOk() {
          _this.competeFocusRemove();
        },
        onCancel() {},
      });
    },
    bodyClick() {
      this.show1 = false;
      this.authorActive = false;
      if (this.tabKey == "1") {
        this.$refs.time.showYear = false;
      }
      if (this.tabKey == "4") {
        this.relateList = this.relateList.map((value, key) => {
          value.active = false;
          return value;
        });
      }
    },
    // 多个作者
    openAuthor(item, index) {
      this.authorActive = false;
      this.relateList = this.relateList.map((value, key) => {
        if (index == key) {
          value.active = true;
        } else {
          value.active = false;
        }
        return value;
      });
    },
    // 销售走势--选择时间
    changeTime() {
      this.otherLoading = true;
      this.dateType = this.$refs.time.dateType;
      this.authorActive = false;
      this.getCoreData();
      if (this.showChannel) {
        this.getChannel();
      }
    },
    // 销售走势--核心数据类型切换
    coreTypeChange(text) {
      this.typeText = text;
      this.brokenLineData1 = [];
      if (text == "sale_total") {
        this.brokenLineData1 = this.saleTotalList;
      } else if (text == "sale_rank") {
        this.brokenLineData1 = this.saleRankList;
      } else if (text == "sale_ratio") {
        this.brokenLineData1 = this.saleCateList;
      }
      if (this.lineChart1) {
        this.lineChart1.destroy();
        this.initLineData1();
      } else {
        this.initLineData1();
      }
    },
    // 页面标签页切换
    callback(key) {
      if (this.isOwnPublish) {
        this.tabKey = key;
      } else {
        this.tabKey = "5";
        this.$refs.head.globalTip(1, "暂无权限", 0);
        return;
      }
      var _this = this;
      if (this.tabKey == "1") {
        this.typeText = "sale_total";
        this.otherLoading = true;
        _this.$refs.time.cycle = _this.$beforeDate().replace(/-/g, "");
        _this.$refs.time.oneDay = _this.$beforeDate().replace(/-/g, "");
        _this.$refs.time.chooseDate = _this.$beforeDate();
        _this.$refs.time.chooseWeek = _this.$beforeDate();
        _this.$refs.time.chooseMonth = _this.$beforeDate();
        _this.$refs.time.chooseYear = _this.$beforeDate();
        _this.$refs.time.dateText = _this.$beforeDate();
        _this.dateType = 1;
        _this.$refs.time.dateType = 1;
        _this.$refs.time.canAdd = false;
        _this.$refs.time.canSub = true;
        _this.$refs.time.showYear = false;
        _this.typeText = "sale_total";
        this.$nextTick(() => {
          _this.getCoreData();
          if (_this.showChannel) {
            _this.getChannel();
          }
        });
      } else if (this.tabKey == "2") {
        this.otherLoading = true;
        this.getDefault();
        this.getLifeData();
      } else if (this.tabKey == "3") {
        this.otherLoading = true;
        this.getReaderData();
      } else if (this.tabKey == "4") {
        this.otherLoading = true;
        this.getRelateData();
      }
    },
    // 生命周期--选择品种对比
    onSelect1(item1, index1) {
      this.show1 = false;
      this.close1 = true;
      this.inputVal1 = "";
      this.goodshList1 = [];
      this.text1 = item1.title;
      this.selectOther(item1.goods_id);
    },
    onSearch1() {
      this.dataSource = [];
      if (this.inputVal1.length > 0) {
        this.searchLoading = true;
        this.search(this.inputVal1);
      } else {
        this.goodshList1 = [];
      }
    },
    delete1() {
      this.show1 = false;
      this.close1 = false;
      this.text1 = "+设置对比";
      this.otherGoods = [];
      this.lineArr();
    },
    lineArr() {
      let _length;
      if (this.goodsData.length > this.otherGoods.length) {
        _length = this.goodsData.length;
      } else {
        _length = this.otherGoods.length;
      }
      this.brokenLineData2 = [];
      for (let i = 0; i < _length; i++) {
        if (i < this.goodsData.length) {
          this.brokenLineData2.push(this.goodsData[i]);
        }
        if (i < this.otherGoods.length) {
          this.brokenLineData2.push(this.otherGoods[i]);
        }
      }
      this.$nextTick(() => {
        if (this.lineChart2) {
          this.lineChart2.destroy();
          this.initLineData2();
        } else {
          this.initLineData2();
        }
      });
    },
    // 打开城市弹层
    openModal() {
      this.cityModal = true;
      this.$nextTick(() => {
        this.initPopupChart();
      });
    },
    // 品种雷达图
    initRadarData() {
      var { DataView } = DataSet;
      this.radardv = new DataView().source(this.radarData);
      this.radardv.transform({
        type: "fold",
        fields: ["本品"], // 展开字段集
        key: "user", // key字段
        value: "score", // value字段
      });
      this.radarChart = new Chart({
        container: "radar",
        forceFit: false,
        autoFit: true,
        height: 240,
      });
      this.radarChart.legend(false);
      this.radarChart.data(this.radardv.rows);
      this.radarChart.scale("score", {
        min: 0,
        max: 10,
        show: false,
      });
      this.radarChart.coordinate("polar", {
        radius: 0.8,
      });
      // chart.axis(false);
      this.radarChart.axis("score", {
        line: null,
        tickLine: null,
        label: null,
        grid: {
          line: {
            type: "circle",
            style: {
              lineDash: null,
            },
          },
          alternateColor: "rgba(0, 0, 0, 0)",
        },
      });
      this.radarChart.tooltip({
        shared: true, // 合并数据项
        follow: true, // tooltip 跟随鼠标
        showCrosshairs: true, // 展示 crosshairs
        crosshairs: {
          // 配置 crosshairs 样式
          type: "xy", // crosshairs 类型
          line: {
            // crosshairs 线样式
            style: {
              stroke: "#565656",
              lineDash: [4],
            },
          },
        },
      });
      this.radarChart
        .point()
        .position("item*score")
        .color("user")
        .shape("circle")
        .size(4)
        .style({
          stroke: "#fff",
          lineWidth: 1,
          fillOpacity: 1,
        });
      this.radarChart
        .line()
        .position("item*score")
        .color("user")
        .size(2)
        .style({
          fill: "#5B8DF0",
          fillOpacity: 0.3,
        });
      this.radarChart.render();
    },
    // 生命周期折线图
    initLineData2() {
      this.lineChart2 = new Chart({
        container: "broken-line2",
        autoFit: true,
        height: 240,
      });

      this.lineChart2.data(this.brokenLineData2);
      if (this.brokenLineData2.length > 0) {
        this.lineChart2.option("slider", {
          start: 0,
          end: 1,
          data: this.brokenLineData2,
          trendCfg: {
            isArea: false,
          },
        });
      }
      this.lineChart2.scale({
        month: {
          range: [0, 1],
        },
        temperature: {
          nice: true,
          min: 0,
        },
      });
      this.lineChart2.tooltip({
        showCrosshairs: true,
        shared: true,
      });
      this.lineChart2.axis("month", {
        label: {
          formatter: (val) => {
            return val;
          },
        },
        autoHide: false | true,
      });
      this.lineChart2.axis("temperature", {
        label: {
          formatter: (val) => {
            return val;
          },
        },
      });
      this.lineChart2.legend({
        position: "top",
      });
      this.lineChart2
        .line()
        .position("month*temperature")
        .color("city")
        .tooltip("city*temperature", (city, temperature) => {
          return {
            name: city + "销售指数",
            value: temperature,
          };
        })
        .shape("smooth")
        .style({ lineWidth: 1 });

      this.lineChart2.render();
    },
    // 销售走势折线图
    initLineData1() {
      let _this = this;
      this.lineChart1 = new Chart({
        container: "broken-line1",
        autoFit: true,
        height: 240,
      });

      this.lineChart1.data(this.brokenLineData1);
      this.lineChart1.scale({
        month: {
          range: [0, 1],
        },
        temperature: {
          nice: true,
          min: 0,
        },
      });
      this.lineChart1.tooltip({
        showCrosshairs: true,
        shared: true,
      });
      this.lineChart1.axis("month", {
        label: {
          formatter: function (value, item, index) {
            if (_this.$refs.time.dateType == 1) {
              if (index % 2 == 0) {
                return value;
              } else {
                return "";
              }
            } else {
              return value;
            }
          },
          autoHide: false | true,
          autoRotate: false,
        },
      });
      this.lineChart1.axis("temperature", {
        label: {
          autoHide: false | true,
          formatter: (val) => {
            return val;
          },
        },
      });
      this.lineChart1.legend(false);
      if (this.$refs.time.dateType == 1) {
        for (let i = 0; i < this.eventList.length; i++) {
          if (_this.eventList[i].start_date == _this.eventList[i].end_date) {
            this.lineChart1.annotation().dataMarker({
              position: { month: _this.eventList[i].start_date },
              top: true,
              text: {
                content: _this.eventList[i].title,
                style: {
                  fontSize: 13,
                },
              },
              line: {
                length: 30 + i * 15,
              },
            });
          } else {
            let sdate, edate;
            if (_this.timeList.includes(_this.eventList[i].start_date)) {
              sdate = _this.eventList[i].start_date;
            } else {
              sdate = _this.timeList[0];
            }
            if (_this.timeList.includes(_this.eventList[i].end_date)) {
              edate = _this.eventList[i].end_date;
            } else {
              edate = _this.timeList[_this.timeList.length - 1];
            }
            this.lineChart1.annotation().text({
              position: [sdate, "median"],
              content: _this.eventList[i].title,
              style: {
                fill: "#6b6b6b",
                fontWeight: 300,
                textAlign: "start",
                textBaseline: "center",
              },
            });
            this.lineChart1.annotation().region({
              start: [sdate, "min"],
              end: [edate, "max"],
              style: {
                lineWidth: 0,
                fill: "#1754D2",
                fillOpacity: 0.05,
                stroke: "#ccc",
              },
            });
          }
        }
      }
      this.lineChart1
        .line()
        .position("month*temperature")
        .color("city", (city) => {
          if (city == "上年同期") {
            return "#D1DDF6";
          } else if (city == "当期") {
            return "#5A8BEE";
          }
        })
        .shape("circle")
        .style({ lineWidth: 2 })
        .tooltip(
          "month*temperature*city*range",
          function (month, temperature, city, range) {
            // tooltip的第一个参数写上需要显示的字段'item1*item2*...'；第二个参数为一个函数，该函数的参数为需要显示的字段。
            let _title;
            if (_this.$refs.time.dateType == 2) {
              _title = month + "（" + range + "）";
            } else {
              _title = month;
            }
            return {
              title: _title,
              name: city,
              value: temperature, // 这里也可以通过调用其他自定义函数的方式，去对数据进行更深层次的变换。但要注意this的指向问题！
            };
          }
        );

      this.lineChart1
        .point()
        .position("month*temperature")
        .color("city", (city) => {
          if (city == "上年同期") {
            return "#D1DDF6";
          } else if (city == "当期") {
            return "#5A8BEE";
          }
        })
        .tooltip(false)
        .shape("circle");

      this.lineChart1.render();
    },
    // 性别分布饼图
    initRing1() {
      let data = this.ringData1;
      this.ringChange1 = new Chart({
        container: "ring1",
        autoFit: true,
        padding: [-80, 0, 0, 0],
        height: 234,
      });
      this.ringChange1.data(data);
      this.ringChange1.legend(false);
      this.ringChange1.tooltip(false);
      this.ringChange1.facet("rect", {
        fields: ["name"],
        // padding: 20,
        showTitle: false,
        eachView: (view, facet) => {
          const data = facet.data;
          let color;
          if (data[0].name === "男性") {
            color = "#2B6AE7";
          } else if (data[0].name === "女性") {
            color = "#EA5D73";
          } else if (data[0].name === "未知") {
            color = "#FF8C3F";
          }
          data.push({ name: "其他", value: 100 - data[0].value });
          view.data(data);
          view.coordinate("theta", {
            radius: 0.9,
            innerRadius: 0.75,
          });
          view
            .interval()
            .adjust("stack")
            .position("value")
            .color("name", [color, "#EDF6FC"])
            .style({
              opacity: 1,
            });
          view.annotation().text({
            position: ["50%", "85%"],
            content: data[0].name,
            style: {
              fontSize: 12,
              fill: "#7789AF",
              fontWeight: 300,
              textBaseline: "bottom",
              textAlign: "center",
            },
            offsetY: 23,
          });

          view.annotation().text({
            position: ["50%", "85%"],
            content: data[0].value + "%",
            style: {
              fontSize: 12,
              fill: "#07193F",
              fontWeight: 700,
              textAlign: "center",
            },
          });

          // view.interaction("element-active");
        },
      });
      this.ringChange1.render();
    },
    // 消费柱状图
    initRing2() {
      let _this = this,
        data = [],
        _arr = [];
      this.ringData2.map((value, key) => {
        let _obj = {
          value: 100 - value.value,
          name: value.name,
          type: "other",
        };
        _arr.push(_obj);
      });
      data = [..._arr, ...this.ringData2];
      this.ringChange2 = new Chart({
        container: "ring2",
        autoFit: true,
        autoHide: false,
        padding: [10, 0, 0, 0],
        height: 140,
      });
      this.ringChange2.data(data);
      this.ringChange2.scale("value", {
        nice: true,
      });
      this.ringChange2.axis(false);
      this.ringChange2.axis(false);
      this.ringChange2.tooltip(false);
      this.ringChange2.interaction("active-region");
      this.ringChange2.legend(false);
      this.ringChange2
        .interval()
        .position("name*value")
        .color("name*type", (val, type) => {
          if (val == "30元以下" && type == "this") {
            return "#26A4D0";
          } else if (val == "30-60元" && type == "this") {
            return "#4179EA";
          } else if (val == "60-100元" && type == "this") {
            return "#685FA7";
          } else if (val == "100元以上" && type == "this") {
            return "#F5A726";
          } else {
            return "#EDF6FC";
          }
        })
        .adjust("stack");
      this.ringChange2.render();
    },
    // 年龄分布柱状图
    initColumn1() {
      let _this = this,
        data = [],
        _arr = [];
      this.columnData1.map((value, key) => {
        let _obj = {
          value: 100 - value.value,
          name: value.name,
          type: "other",
        };
        _arr.push(_obj);
      });
      data = [..._arr, ...this.columnData1];
      this.columnChange1 = new Chart({
        container: "column1",
        autoFit: true,
        autoHide: false,
        padding: [10, 0, 0, 0],
        height: 140,
      });
      this.columnChange1.data(data);
      this.columnChange1.scale("value", {
        nice: true,
      });
      this.columnChange1.axis(false);
      this.columnChange1.axis(false);
      this.columnChange1.tooltip(false);
      this.columnChange1.interaction("active-region");
      this.columnChange1.legend(false);
      this.columnChange1
        .interval()
        .position("name*value")
        .color("name*type", (val, type) => {
          if (val == this.columnData1[0].name && type == "this") {
            return "#7079E0";
          } else if (val == this.columnData1[1].name && type == "this") {
            return "#D15B7E";
          } else if (val == this.columnData1[2].name && type == "this") {
            return "#FC6E6C";
          } else if (val == this.columnData1[3].name && type == "this") {
            return "#FFA06B";
          } else if (val == this.columnData1[4].name && type == "this") {
            return "#FFB64D";
          } else if (val == this.columnData1[5].name && type == "this") {
            return "#FFDB3F";
          } else {
            return "#EDF6FC";
          }
        })
        .adjust("stack");
      this.columnChange1.render();
    },
    // 城市层级饼图
    initColumn2() {
      let _num = (
          this.columnData2[0].value +
          this.columnData2[1].value +
          this.columnData2[5].value
        ).toFixed(2),
        _num1 = (this.columnData2[2].value + this.columnData2[3].value).toFixed(
          2
        );
      let data = [
        {
          name: "一二线城市",
          value: Number(_num),
        },
        {
          name: "三四线城市",
          value: Number(_num1),
        },
        { name: "五线城市", value: this.columnData2[4].value },
      ];
      this.columnChange2 = new Chart({
        container: "column2",
        autoFit: true,
        padding: [-80, 0, 0, 0],
        height: 234,
      });
      this.columnChange2.data(data);
      this.columnChange2.legend(false);
      this.columnChange2.tooltip(false);
      this.columnChange2.facet("rect", {
        fields: ["name"],
        // padding: 20,
        showTitle: false,
        eachView: (view, facet) => {
          const data = facet.data;
          let color;
          if (data[0].name === "一二线城市") {
            color = "#EB5E13";
          } else if (data[0].name === "三四线城市") {
            color = "#FFDD58";
          } else if (data[0].name === "五线城市") {
            color = "#F8E692";
          }
          data.push({ name: "未知", value: 100 - data[0].value });
          view.data(data);
          view.coordinate("theta", {
            radius: 0.9,
            innerRadius: 0.75,
          });
          view
            .interval()
            .adjust("stack")
            .position("value")
            .color("name", [color, "#EDF6FC"])
            .style({
              opacity: 1,
            });
          view.annotation().text({
            position: ["50%", "85%"],
            content: data[0].name,
            style: {
              fontSize: 12,
              fill: "#7789AF",
              fontWeight: 300,
              textBaseline: "bottom",
              textAlign: "center",
            },
            offsetY: 25,
          });

          view.annotation().text({
            position: ["50%", "85%"],
            content: data[0].value + "%",
            style: {
              fontSize: 12,
              fill: "#07193F",
              fontWeight: 700,
              textAlign: "center",
            },
          });

          // view.interaction("element-active");
        },
      });
      this.columnChange2.render();
    },
    // 弹层城市层级饼图
    initPopupChart() {
      let data = [
        {
          name: "一二线城市人口",
          value: 31.0,
        },
        {
          name: "三四线城市人口",
          value: 51.0,
        },
        { name: "五线城市人口", value: 18.0 },
      ];
      this.popupCityChart = new Chart({
        container: "cityChart",
        autoFit: true,
        padding: [-80, 0, 0, 0],
        height: 200,
      });
      this.popupCityChart.data(data);
      this.popupCityChart.legend(false);
      this.popupCityChart.tooltip(false);
      this.popupCityChart.facet("rect", {
        fields: ["name"],
        // padding: 20,
        showTitle: false,
        eachView: (view, facet) => {
          const data = facet.data;
          let color;
          if (data[0].name === "一二线城市人口") {
            color = "#EB5E13";
          } else if (data[0].name === "三四线城市人口") {
            color = "#FFDD58";
          } else if (data[0].name === "五线城市人口") {
            color = "#F8E692";
          }
          data.push({ name: "未知", value: 100 - data[0].value });
          view.data(data);
          view.coordinate("theta", {
            radius: 0.9,
            innerRadius: 0.75,
          });
          view
            .interval()
            .adjust("stack")
            .position("value")
            .color("name", [color, "#EDF6FC"])
            .style({
              opacity: 1,
            });
          view.annotation().text({
            position: ["50%", "85%"],
            content: data[0].name,
            style: {
              fontSize: 12,
              fill: "#7789AF",
              fontWeight: 300,
              textBaseline: "bottom",
              textAlign: "center",
            },
            offsetY: 25,
          });

          view.annotation().text({
            position: ["50%", "85%"],
            content: data[0].value + "%",
            style: {
              fontSize: 12,
              fill: "#07193F",
              fontWeight: 700,
              textAlign: "center",
            },
          });

          // view.interaction("element-active");
        },
      });
      this.popupCityChart.render();
    },
    // 读者画像地域
    initMap() {
      let _this = this;
      const scene = new Scene({
        id: "map",
        logoVisible: false,
        map: new Mapbox({
          center: [116.2825, 39.9],
          pitch: 0,
          style: "blank",
          zoom: 3,
          minZoom: 1,
          maxZoom: 10,
        }),
      });
      scene.setMapStatus({
        dragEnable: false, //是否允许地图拖拽
        keyboardEnable: false, // 是否允许形键盘事件
        doubleClickZoom: false, // 双击放大
        zoomEnable: false, // 滚动缩放
        rotateEnable: false, // 旋转
      });
      const attachMapContainer = document.createElement("div");
      attachMapContainer.id = "attach";
      attachMapContainer.style.cssText =
        "position: absolute;height:80px;width:50px;right:50px;bottom:20px;border:1px solid #F4F7FD;";
      document.getElementById("map").parentElement.append(attachMapContainer);

      scene.on("loaded", () => {
        new CountryLayer(scene, {
          data: [],
          joinBy: ["NAME_CHN", "name"],
          depth: 1,
          provinceStroke: "#FFF",
          stroke: "#D1DDF5",
          countyStroke: "#FFF",
          cityStroke: "#FFF",
          cityStrokeWidth: 0,
          // chinaNationalWidth: 0,
          coastlineWidth: 0,
          chinaNationalStroke: "#D1DDF5",
          label: {
            enable: false,
          },
          fill: {
            color: {
              field: "NAME_CHN",
              values:
                ("name",
                function (value) {
                  let _arr = _this.barMapData;
                  if (value.indexOf(_arr[0]) > -1 && _arr[0]) {
                    return "#4777D8";
                  } else if (value.indexOf(_arr[1]) > -1 && _arr[1]) {
                    return "#6E94E1";
                  } else if (value.indexOf(_arr[2]) > -1 && _arr[2]) {
                    return "#82A3E5";
                  } else if (value.indexOf(_arr[3]) > -1 && _arr[3]) {
                    return "#96B2E8";
                  } else if (value.indexOf(_arr[4]) > -1 && _arr[4]) {
                    return "#A0B9EA";
                  } else if (value.indexOf(_arr[5]) > -1 && _arr[5]) {
                    return "#BDCEF1";
                  } else {
                    return "#D1DDF5";
                  }
                }),
            },
            activeColor: "#4777D8",
          },
          popup: {
            enable: true,
            Html: (props) => {
              return `<span>${props.NAME_CHN}</span>`;
            },
          },
        });
      });
      // 添加附图，附图需要和主图保持一致
      const scene2 = new Scene({
        id: "attach",
        logoVisible: false,
        map: new Mapbox({
          center: [113.60540108435657, 12.833692637803168],
          pitch: 0,
          style: "blank",
          zoom: 1.93,
          minZoom: 0,
          maxZoom: 3,
          interactive: false,
        }),
      });
      scene2.on("loaded", () => {
        new CountryLayer(scene2, {
          data: [],
          label: {
            enable: false,
          },
          popup: {
            enable: true,
          },
          autoFit: false,
          depth: 1,
          fill: {
            color: {
              field: "NAME_CHN",
              values: [
                "#feedde",
                "#fdd0a2",
                "#fdae6b",
                "#fd8d3c",
                "#e6550d",
                "#a63603",
              ],
            },
          },
        });
      });
    },
    // 读者画像地域条形图
    inintBar1() {
      let _height = this.barData1.length * 26;
      const chart = new Chart({
        container: "bar-chart1",
        autoFit: true,
        height: _height,
      });
      chart.data(this.barData1.reverse());
      chart.scale({
        value: {
          max: 150,
          min: 0,
          alias: " ",
        },
      });
      chart.axis("name", {
        title: null,
        tickLine: null,
        grid: null,
        line: null,
      });

      chart.axis("value", {
        label: null,
        line: null,
        tickLine: null,
        grid: {
          line: {
            style: {
              fillOpacity: 0,
              strokeOpacity: 0,
            },
          },
        },
        title: null,
      });
      chart.legend(false);
      chart.coordinate().transpose();
      chart.tooltip(false);
      chart
        .interval()
        .position("name*value")
        .size(8)
        .label("value", {
          style: {
            fill: "#7789af",
            autoHide: false,
          },
          // offset: 10,
          content: (originData) => {
            return originData.value + "%";
          },
          remove: false,
        });
      chart.render();
    },
    // 读者画像类目偏好条形图
    inintBar2() {
      let _height = this.barData2.length * 26;
      const chart = new Chart({
        container: "bar-chart2",
        autoFit: true,
        autoHide: false,
        height: _height,
      });
      chart.data(this.barData2.reverse());
      chart.scale({
        value: {
          max: 150,
          min: 0,
          alias: " ",
        },
      });
      chart.axis("name", {
        title: null,
        tickLine: null,
        grid: null,
        line: null,
      });

      chart.axis("value", {
        label: null,
        line: null,
        tickLine: null,
        grid: {
          line: {
            style: {
              fillOpacity: 0,
              strokeOpacity: 0,
            },
          },
        },
        title: null,
      });
      chart.legend(false);
      chart.coordinate().transpose();
      chart.tooltip(false);
      chart
        .interval()
        .position("name*value")
        .size(8)
        .label("value", {
          style: {
            fill: "#7789af",
            autoHide: false,
          },
          // offset: 10,
          content: (originData) => {
            return originData.value + "%";
          },
          remove: false,
        });
      chart.render();
    },
    // 读者画像作者偏好条形图
    inintBar3() {
      let _height = this.barData3.length * 26;
      const chart = new Chart({
        container: "bar-chart3",
        autoFit: true,
        autoHide: false,
        height: _height,
      });
      chart.data(this.barData3.reverse());
      chart.scale({
        value: {
          max: 150,
          min: 0,
          alias: " ",
        },
      });
      chart.axis("name", {
        title: null,
        tickLine: null,
        grid: null,
        line: null,
      });

      chart.axis("value", {
        label: null,
        line: null,
        tickLine: null,
        grid: {
          line: {
            style: {
              fillOpacity: 0,
              strokeOpacity: 0,
            },
          },
        },
        title: null,
      });
      chart.legend(false);
      chart.coordinate().transpose();
      chart.tooltip(false);
      chart
        .interval()
        .position("name*value")
        .size(8)
        .label("value", {
          style: {
            fill: "#7789af",
            autoHide: false,
          },
          // offset: 10,
          content: (originData) => {
            return originData.value + "%";
          },
          remove: false,
        });
      chart.render();
    },
    // 渠道数据
    changeChannel() {
      if (this.showChannel) {
        this.showChannel = false;
      } else {
        this.getChannel();
      }
    },
    // 进入店铺
    openShop(item) {
      let _url,
        _isbn = this.goodsInfo.isbn;
      if (item.platform_name == "天猫") {
        _url = "https://bokuts.tmall.com/";
      } else if (item.platform_name == "京东") {
        _url =
          "https://mall.jd.com/view_search-124539-40964-38566-0-0-0-0-1-1-60.html?keyword=" +
          _isbn;
      } else if (item.platform_name == "当当") {
        _url = "http://shop.dangdang.com/12244/list.html?key=" + _isbn;
      } else if (item.platform_name == "官网") {
        _url = "https://www.bookuu.com/search.php?k=" + _isbn;
      } else if (item.platform_name == "唯品会") {
        _url = "https://list.vip.com/mplist.html?storeId=ST42525064";
      }
      this.$openNewPage(2,_url);
    },
    // 渠道图表
    initChannel() {
      let _this = this,
        _data = [];
      for (let i = 0; i < this.channelList.length; i++) {
        if (this.channelList[i].platform_name == "天猫") {
          _data = this.tmList;
        } else if (this.channelList[i].platform_name == "京东") {
          _data = this.jdList;
        } else if (this.channelList[i].platform_name == "当当") {
          _data = this.ddList;
        } else if (this.channelList[i].platform_name == "官网") {
          _data = this.gwList;
        } else if (this.channelList[i].platform_name == "唯品会") {
          _data = this.wphList;
        } else if (this.channelList[i].platform_name == "拼多多") {
          _data = this.pddList;
        } else if (this.channelList[i].platform_name == "其他") {
          _data = this.otherList;
        }
        this.channelChart[i] = new Chart({
          container: "channel-chart" + (i + 1),
          autoFit: false,
          width: 600,
          height: 89,
        });

        this.channelChart[i].data(_data);
        this.channelChart[i].scale({
          month: {
            range: [0, 1],
          },
          temperature: {
            nice: true,
            min: 0,
          },
        });
        this.channelChart[i].tooltip({
          showCrosshairs: true,
          shared: true,
        });

        this.channelChart[i].axis("month", {
          tickLine: null,
          label: {
            formatter: function (value, item, index) {
              if (_this.$refs.time.dateType == 1) {
                if (index % 3 == 0) {
                  return value;
                } else {
                  return "";
                }
              } else if (
                _this.$refs.time.dateType == 2 ||
                _this.$refs.time.dateType == 3
              ) {
                if (index % 2 == 0) {
                  return value;
                } else {
                  return "";
                }
              } else {
                return value;
              }
            },
            autoHide: false | true,
            autoRotate: false,
          },
        });
        this.channelChart[i].axis("temperature", {
          tickLine: null,
          line: null,
          label: {
            formatter: (val) => {
              return val;
            },
          },
        });
        this.channelChart[i].legend(false);
        this.channelChart[i]
          .line()
          .position("month*temperature")
          .color("city", (city) => {
            if (city == "上年同期") {
              return "#D1DDF6";
            } else if (city == "当期") {
              return "#5A8BEE";
            }
          })
          .shape("circle")
          .style({ lineWidth: 2 })
          .tooltip(
            "month*temperature*city*range",
            function (month, temperature, city, range) {
              let _title;
              if (_this.$refs.time.dateType == 2) {
                _title = month + "（" + range + "）";
              } else {
                _title = month;
              }
              return {
                title: _title,
                name: city,
                value: temperature,
              };
            }
          );

        this.channelChart[i]
          .point()
          .position("month*temperature")
          .color("city", (city) => {
            if (city == "上年同期") {
              return "#D1DDF6";
            } else if (city == "当期") {
              return "#5A8BEE";
            }
          })
          .tooltip(false)
          .shape("circle");

        this.channelChart[i].render();
        // 移入当前图表时使得其余图表的 tooltip 也展开
        this.channelChart[i].on("mousemove", (ev) => {
          const position = {
            x: ev.x,
            y: ev.y,
          };
          for (let index = 0; index < _this.channelChart.length; index++) {
            const cha = _this.channelChart[index];
            cha.showTooltip(position);
          }
        });
        // 移出当前图表时使得其余图表的 tooltip 也隐藏起来
        this.channelChart[i].on("mouseout", () => {
          for (let index = 0; index < _this.channelChart.length; index++) {
            const cha = _this.channelChart[index];
            if (cha !== _this.channelChart[i]) {
              cha.hideTooltip();
            }
          }
        });
      }
    },
    scrollHeight(value) {
      if (value > 100) {
        this.detailFix = true;
      } else {
        this.detailFix = false;
      }
    },
    // 头部切换机构触发
    publisherChange() {
      this.isLoading = true;
      this.otherLoading = true;
      this.tabKey = "1";
      let _this = this;
      this.showChannel = false;
      _this.$refs.time.cycle = _this.$beforeDate().replace(/-/g, "");
      _this.$refs.time.oneDay = _this.$beforeDate().replace(/-/g, "");
      _this.$refs.time.chooseDate = _this.$beforeDate();
      _this.$refs.time.chooseWeek = _this.$beforeDate();
      _this.$refs.time.chooseMonth = _this.$beforeDate();
      _this.$refs.time.chooseYear = _this.$beforeDate();
      _this.$refs.time.dateText = _this.$beforeDate();
      _this.dateType = 1;
      _this.$refs.time.dateType = 1;
      _this.$refs.time.canAdd = false;
      _this.$refs.time.canSub = true;
      _this.$refs.time.showYear = false;
      _this.typeText = "sale_total";
      this.$nextTick(() => {
        _this.getData();
        _this.getCoreData();
      });
    },
  },
};
</script>
